Wie ES6 mit Gulp zu reduzieren

Question

Ich bin relativ neu zu einem Schreiben gulpfile.js manuell. Ich habe ein Backbone und Mario basiertes Projekt, wo die großen Schluck Datei so weit sah wie folgt aus:

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']); 

Jetzt brauche ich minification von Javascript zu aktivieren, für die ich in den folgenden link bezeichnet. Ich benutze das mit uglify-js-harmony als Minifier für ES6-Unterstützung, da der Großteil meines Codes ES6-Syntax verwendet. Die modifizierte schluck Datei sieht wie folgt aus:

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']); 

Nun, wenn ich gulp die Aufgabe für die Komprimierung beginnt laufen, keinen Fehler geben, aber nie abgeschlossen und die Build (dist) wird wie bisher (keine Minification passiert!). Muss ich irgendwie diese Kompressionsaufgabe in die bundle Funktion mit einem anderen .pipe integrieren oder mache ich hier etwas falsch? Ist es auch korrekt, die Verkleinerung zu machen, nachdem die bundle.js erstellt wurde, was versucht wird, hier zu tun oder muss es in der Phase sein, wenn die Quelldateien noch nicht verkettet sind?

Answer 1

1. Klon https://github.com/terinjokes/gulp-uglify/
2. Finde https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13 in bevorzugter Kasse (Beliebten latest)
3. Set Version für uglify-js zu mishoo/UglifyJS2#harmony (Abkürzung für https://github.com/mishoo/UglifyJS2#harmony)

Hinweis, dass dies eine vorübergehende Set- bis es eine offizielle Version von Uglify Unterstützung Harmonie gibt

Answer 2

Versuchen Sie mit Babili ES6 + Minifier - https://github.com/babel/babili nur passieren babili als voreingestellte Option babel mit

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