GulpUglifyError：无法缩小 JavaScript

Question

我正在尝试缩小我正在使用 gulp 任务运行程序的脚本文件 我正在尝试 gulp-uglify 插件

代码：

 gulp.task('concat', function() {
    return gulp.src('app/**/*.js')
        // .pipe(concat('script.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/'))
});

但我收到错误

当我尝试将 gulp 任务作为 gulp concat 运行时 任何帮助将不胜感激

Answer 1

主要错误是在您使用 ES6 格式时产生的。使用 gulp-uglify-es 模块而不是 'gulp-uglify' 来克服这个错误。

var uglify = require('gulp-uglify-es').default;

注意：gulp-uglify-es 不再维护。您可能想改用terser/gulp-terser：

Answer 2

在控制台中查看错误：

var gutil = require('gulp-util');

gulp.task('concat', function() {
return gulp.src('app/**/*.js')
    // .pipe(concat('script.js'))
    .pipe(uglify())
    .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
    .pipe(gulp.dest('./dist/'))
});

要找到准确的文件，带有错误寄存器的行号并运行此任务：

var pump = require('pump');

gulp.task('uglify-error-debugging', function (cb) {
  pump([
    gulp.src('app/**/*.js'),
    uglify(),
    gulp.dest('./dist/')
  ], cb);
});

Answer 3

我认为这里的最佳答案并没有解释如何获取错误。 docs 有一个关于错误处理的部分：

gulp-uglify 如果无法缩小一个 'error' 事件 具体文件

因此，只需捕获错误并对其执行任何操作（例如登录到控制台）即可查看文件名、行号和其他信息：

uglify().on('error', console.error)

或者在更大的范围内：

gulp.task('foo', () => {

    return gulp.src([
        'asset/src/js/foo/*.js',
        'asset/src/js/bar/*.js',
    ])
    .pipe(uglify().on('error', console.error))
    .pipe(concat('bundle.js'))
    .pipe(gulp.dest('./'));

});

这给了你一个非常有用的错误！

{ GulpUglifyError: unable to minify JavaScript
    at [stack trace])
  cause:
   { SyntaxError: Continue not inside a loop or switch
       [stack trace]
     message: 'Continue not inside a loop or switch',
     filename: 'ProductForm.js',
     line: 301,
     col: 37,
     pos: 10331 },
  plugin: 'gulp-uglify',
  fileName:
   '/asset/src/js/foo/ProductForm.js',
  showStack: false }

Answer 4

您在脚本文件中使用过 ES6 格式吗？ 如果是这样，请立即尝试 ES5，因为当您执行 gulp-uglify 时，它现在还不理解 ES6 格式 然后尝试你的代码

 gulp.task('concat', function() {
    return gulp.src('app/**/*.js')
        .pipe(concat('script.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/'))
});

并运行任务gulp concat 它将起作用

Answer 5

对我来说，这是一个已弃用的选项“preserveComments”，它产生了错误（并完全使脚本崩溃）。

使用以下方法发现问题：

gulp.task('concat', function() {
return gulp.src('app/**/*.js')
    .pipe(uglify())
    .on('error', function (err) { console.log( err ) })
    .pipe(gulp.dest('./dist/'))
});

Answer 6

试试这个

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyJS = require('gulp-minify');

gulp.task('concat', function() {
    return gulp.src('app/**/*.js')
        .pipe(minifyJS())
        .pipe(concat('bundle.min.js'))
        .pipe(uglify({ mangle: false }))
        .pipe(gulp.dest('./dist/'));
});

Answer 7

您可能有语法错误或使用了 ES6 语法。你可以先试试https://skalman.github.io/UglifyJS-online/。

Answer 8

无法缩小 JavaScript 的主要错误是找不到路径。您可以使用任务 usemin 为此您需要：

$ sudo npm install gulp-usemin --save-dev
$ sudo npm install gulp-livereload --save-dev
$ sudo npm install gulp-util --save-dev

并且需要：

var usemin = require('gulp-usemin');
var livereload = require('gulp-livereload');
var gutil = require('gulp-util'); //gutil for error display

gulp.task('usemin',['jshint'], function(){
    return gulp.src('./app/index.html')
    .pipe(usemin({
        css: [minifycss(),rev()],
        scripts: [uglify().on('error', function(err) {gutil.log(gutil.colors.red('[Error]'), err.toString());this.emit('end');}),rev()]
    })) 
    .pipe(gulp.dest('dist'))
    .pipe(livereload());
});

Change the js: [uglify(), rev()] to scripts: [uglify(), rev()]