Question

自从Bootstrap 4 Alpha的最新更改以来，我无法使用当前的Gulp任务缩小核心.js文件。我收到错误：＆＃34; GulpUglifyError：无法缩小JavaScript＆＃34;。

关注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

所以bootstrap 4 beta最有可能使用ES6，目前uglify（）无法缩小ES6代码。

你很可能需要先使用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来更好/更轻松地处理错误。

Gulp：Uglifying Bootstrap 4 js文件

2 个答案: