2016-07-18 102 views
6

Sono relativamente nuovo alla scrittura di un gulpfile.js manualmente. Ho un Backbone e progetto basato Marionette in cui il file sorso finora sembrava il seguente:Come ridurre ES6 utilizzando Gulp

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 
var browserify = require('browserify'); 
var del = require('del'); 
var watchify = require('watchify'); 
var source = require('vinyl-source-stream'); 
var stylish = require('jshint-stylish'); 
var buffer = require('vinyl-buffer'); 
var _ = require('lodash'); 

var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('clean', function(cb) { 
    return del([ 
    'app/tmp' 
    ], cb); 
}); 

gulp.task('html', function() { 
    return gulp.src('./src/index.html') 
    .pipe($.plumber()) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('images', function() { 
    gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif', 
    './src/assets/images/*.png' 
    ]) 
    .pipe(gulp.dest('./dist/images')); 
}); 

gulp.task('vendor-css', function() { 
    gulp.src(['./src/assets/styles/vendor/*.css' 
    ]) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('fonts', function() { 
    gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', 
    './src/assets/fonts/*.svg' 
    ]) 
    .pipe(gulp.dest('./dist/fonts')); 
}); 

gulp.task('styles', function() { 
    return gulp.src('./src/main.styl') 
    .pipe($.stylus()) 
    .pipe($.autoprefixer()) 
    .pipe($.rename('bundle.css')) 
    .pipe(gulp.dest('./dist')) 
    .pipe(reload({ stream: true })); 
}); 

var bundler = _.memoize(function(watch) { 
    var options = {debug: true}; 

    if (watch) { 
    _.extend(options, watchify.args); 
    } 

    var b = browserify('./src/main.js', options); 

    if (watch) { 
    b = watchify(b); 
    } 

    return b; 
}); 

var handleErrors = function() { 
    var args = Array.prototype.slice.call(arguments); 
    delete args[0].stream; 
    $.util.log.apply(null, args); 
    this.emit('end'); 
}; 

function bundle(cb, watch) { 
    return bundler(watch).bundle() 
    .on('error', handleErrors) 
    .pipe(source('bundle.js')) 
    .pipe(buffer()) 
    .pipe($.sourcemaps.init({ loadMaps: true })) 
    .pipe($.sourcemaps.write('./')) 
    .pipe(gulp.dest('./dist')) 
    .on('end', cb) 
    .pipe(reload({ stream: true })); 
} 

gulp.task('scripts', function(cb) { 
    bundle(cb, true); 
}); 

gulp.task('jshint', function() { 
    return gulp.src(['./src/**/*.js', './test/**/*.js']) 
    .pipe($.plumber()) 
    .pipe($.jshint()) 
    .pipe($.jshint.reporter(stylish)); 
}); 

var reporter = 'spec'; 

gulp.task('mocha', ['jshint'], function() { 
    return gulp.src([ 
    './test/setup/node.js', 
    './test/setup/helpers.js', 
    './test/unit/**/*.js' 
    ], { read: false }) 
    .pipe($.plumber()) 
    .pipe($.mocha({ reporter: reporter })); 
}); 

gulp.task('build', [ 
    'clean', 
    'html', 
    'images', 
    'vendor-css', 
    'fonts', 
    'styles', 
    'scripts', 
    'test' 
]); 

gulp.task('test', [ 
    'jshint' 
]); 

gulp.task('watch', ['build'], function() { 
    browserSync.init({ 
    server: { 
     baseDir: 'dist' 
    } 
    }); 

    reporter = 'dot'; 
    bundler(true).on('update', function() { 
    gulp.start('scripts'); 
    gulp.start('test'); 
    }); 
    gulp.watch('./test/**/*.js', ['test']); 
    gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']); 
    gulp.watch(['./src/*.html'], ['html']); 
}); 

gulp.task('default', ['watch']); 

Ora ho bisogno di abilitare Javascript per minimizzazione di cui ho fatto riferimento al seguente link. Sto usando quello con uglify-js-harmony come minificatore per il supporto ES6 poiché la maggior parte del mio codice utilizza la sintassi ES6. Il file gulp modificato sia simile alla seguente:

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 
var browserify = require('browserify'); 
var del = require('del'); 
var watchify = require('watchify'); 
var source = require('vinyl-source-stream'); 
var stylish = require('jshint-stylish'); 
var buffer = require('vinyl-buffer'); 
var uglifyjs = require('uglify-js-harmony'); 
var minifier = require('gulp-uglify/minifier'); 
var pump = require('pump'); 
var _ = require('lodash'); 

var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('clean', function(cb) { 
    return del([ 
    'app/tmp' 
    ], cb); 
}); 

gulp.task('html', function() { 
    return gulp.src('./src/index.html') 
    .pipe($.plumber()) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('images', function() { 
    gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif', 
    './src/assets/images/*.png' 
    ]) 
    .pipe(gulp.dest('./dist/images')); 
}); 

gulp.task('vendor-css', function() { 
    gulp.src(['./src/assets/styles/vendor/*.css' 
    ]) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('fonts', function() { 
    gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', 
    './src/assets/fonts/*.svg' 
    ]) 
    .pipe(gulp.dest('./dist/fonts')); 
}); 

gulp.task('styles', function() { 
    return gulp.src('./src/main.styl') 
    .pipe($.stylus()) 
    .pipe($.autoprefixer()) 
    .pipe($.rename('bundle.css')) 
    .pipe(gulp.dest('./dist')) 
    .pipe(reload({ stream: true })); 
}); 

var bundler = _.memoize(function(watch) { 
    var options = {debug: true}; 

    if (watch) { 
    _.extend(options, watchify.args); 
    } 

    var b = browserify('./src/main.js', options); 

    if (watch) { 
    b = watchify(b); 
    } 

    return b; 
}); 

var handleErrors = function() { 
    var args = Array.prototype.slice.call(arguments); 
    delete args[0].stream; 
    $.util.log.apply(null, args); 
    this.emit('end'); 
}; 

function bundle(cb, watch) { 
    return bundler(watch).bundle() 
    .on('error', handleErrors) 
    .pipe(source('bundle.js')) 
    .pipe(buffer()) 
    .pipe($.sourcemaps.init({ loadMaps: true })) 
    .pipe($.sourcemaps.write('./')) 
    .pipe(gulp.dest('./dist')) 
    .on('end', cb) 
    .pipe(reload({ stream: true })); 
} 

gulp.task('scripts', function(cb) { 
    bundle(cb, true); 
}); 

gulp.task('jshint', function() { 
    return gulp.src(['./src/**/*.js', './test/**/*.js']) 
    .pipe($.plumber()) 
    .pipe($.jshint()) 
    .pipe($.jshint.reporter(stylish)); 
}); 

gulp.task('compress', function (cb) { 
    var options = { 
    preserveComments: 'license' 
    }; 

    pump([ 
     gulp.src('./dist/bundle.js'), 
     minifier(options, uglifyjs), 
     gulp.dest('./dist') 
    ], 
    cb 
); 
}); 

var reporter = 'spec'; 

gulp.task('mocha', ['jshint'], function() { 
    return gulp.src([ 
    './test/setup/node.js', 
    './test/setup/helpers.js', 
    './test/unit/**/*.js' 
    ], { read: false }) 
    .pipe($.plumber()) 
    .pipe($.mocha({ reporter: reporter })); 
}); 

gulp.task('build', [ 
    'clean', 
    'html', 
    'images', 
    'vendor-css', 
    'fonts', 
    'styles', 
    'scripts', 
    'test', 
    'compress' 
]); 

gulp.task('test', [ 
    'jshint' 
]); 

gulp.task('watch', ['build'], function() { 
    browserSync.init({ 
    server: { 
     baseDir: 'dist' 
    } 
    }); 

    reporter = 'dot'; 
    bundler(true).on('update', function() { 
    gulp.start('scripts'); 
    gulp.start('test'); 
    }); 
    gulp.watch('./test/**/*.js', ['test']); 
    gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']); 
    gulp.watch(['./src/*.html'], ['html']); 
}); 

gulp.task('default', ['watch']); 

Ora, quando faccio funzionare gulp il compito per gli inizio compressione, non dà alcun errore, ma non finisce mai e la build (dist) è fatto stesso di prima (senza la minificazione avviene!). Devo in qualche modo integrare questa attività di compressione nella funzione bundle usando un altro .pipe o sto facendo qualcos'altro in un modo sbagliato qui? Inoltre, è corretto eseguire il minification dopo che è stato creato lo bundle.js, che è ciò che sto tentando di fare qui o è necessario essere nella fase in cui i file di origine non sono ancora concatenati?

risposta

1
  1. Clone https://github.com/terinjokes/gulp-uglify/
  2. Individuare https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13 in cassa preferita (preferito ultimo)
  3. Set versione per uglify-js a mishoo/UglifyJS2#harmony (scorciatoia per https://github.com/mishoo/UglifyJS2#harmony)

Si noti che si tratta di un set-temporanea fino a quando non vi è un rilascio ufficiale di uglify armonia di supporto

+0

non riesco a far funzionare tutto questo. – Automatico

+0

Con cosa sei bloccato? (Nota che non sto usando il gulp, quindi se ci sono problemi specifici di gulp, non posso aiutarti) – avdg

0

Provare a usare babili ES6 + minificatore - https://github.com/babel/babili basta passare Babili come opzione preimpostata utilizzando babele

.pipe('*.js', babel({presets: ['babili']}))