Làm thế nào để giảm bớt ES6 bằng cách sử dụng Gulp

Question

Tôi tương đối mới để viết một gulpfile.js theo cách thủ công. Tôi có một Backbone và dự án rối dựa nơi tệp ngụm cho đến nay trông giống như sau:

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

Bây giờ tôi cần phải kích hoạt việc rút gọn của javascript mà tôi đề cập đến link sau. Tôi đang sử dụng một với uglify-js-harmony làm trình biên tập cho hỗ trợ ES6 vì hầu hết mã của tôi đang sử dụng cú pháp ES6. Các tập tin ngụm sửa đổi trông như sau:

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

Bây giờ, khi tôi chạy gulp nhiệm vụ cho bắt đầu nén, không đưa ra bất cứ lỗi nhưng không bao giờ kết thúc và xây dựng (quận) được thực hiện tương tự như trước (không việc khai thác sẽ xảy ra!). Tôi có cần phải bằng cách nào đó tích hợp tác vụ nén này vào chức năng bundle bằng cách sử dụng một số khác .pipe hoặc tôi đang làm điều gì khác theo cách sai ở đây không? Ngoài ra, việc sửa lỗi sau khi bundle.js được tạo ra chính xác là điều gì đang cố gắng thực hiện ở đây hay không cần phải ở giai đoạn mà các tệp nguồn vẫn chưa được ghép nối?

Answer 1

1. Clone https://github.com/terinjokes/gulp-uglify/
2. Xác định vị trí https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13 trong thanh toán ưa thích (ưa thích nhất)
3. Set phiên bản dành cho làm xấu đi-js để mishoo/UglifyJS2#harmony (phím tắt cho https://github.com/mishoo/UglifyJS2#harmony)

Lưu ý rằng đây là một set-tạm thời cho đến khi có bản phát hành chính thức của uglify hỗ trợ sự hài hòa

Answer 2

Hãy thử sử dụng babili ES6 + minifier - https://github.com/babel/babili chỉ cần chuyển babili làm tùy chọn đặt trước bằng cách sử dụng babel

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