Gulp:丑化Bootstrap 4 js文件

Question

由于Bootstrap4Alpha的最新变化，我不能缩小核心.js文件与我目前的Gulp任务。我得到错误："GulpUglifyError: unable to minify JavaScript“。

在this question之后，我添加了gulp-babel和gulp-webpack，但它不起作用。

我遗漏了什么？

Gulp.js摘录：

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var babel = require('gulp-babel');

// List of .js files to concatenate
var js = {
    jsSrc: [
        paths.src + "/js/alert.js",
        paths.src + "/js/button.js",
        paths.src + "/js/collapse.js",
        paths.src + "/js/modal.js",
        paths.src + "/js/util.js",
        paths.src + "/js/custom.js"
    ]
};

gulp.task('scripts', function() {
    return gulp.src(js.jsSrc)
        .pipe(babel({presets: ['es2015']}) )
        .pipe(webpack())
        .pipe(uglify())
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
        .pipe(concat('bootstrap.min.js'))
        .pipe(gulp.dest(paths.minJs));
});

// Create watch task
gulp.task('watch', function() {
    gulp.watch(paths.src + '/js/**/*.js', ['scripts']);
});

Answer 1

所以Bootstrap4Beta很可能使用ES6，目前ES6 ()还不能缩减Bootstrap4Beta的代码。

你很可能需要先使用babel将ES6转换成ES5，然后再做uglify。

我也做了一些快速阅读。尝试通过在uglify输出中添加以下行来进一步调试错误：

uglify().on('error', function(err) {
   gutil.log(gutil.colors.red('[Error]'), err.toString());
   this.emit('end');
})

这将打印出您的问题的更详细的错误。

Answer 2

使用uglify-es并通过gulp-uglify composer加载它

var uglifyES6 = require('uglify-es');
var composer = require('gulp-uglify/composer');
var uglify = composer(uglifyES6, console);

此外，您可能希望使用pump来更好/更轻松地处理错误。