63

I am trying to minify my script files for which i am using gulp task runner And I am trying gulp-uglify plugin

Code:

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

but i am getting error as

enter image description here

when i try to run gulp task as gulp concat Any help would be appreciated

1

8 Answers 8

103

The main error is generated when you're using ES6 format. Use the gulp-uglify-es module instead of 'gulp-uglify' to overcome this error.

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

Note: gulp-uglify-es is no longer being maintained. You may want to use terser/gulp-terser instead:

Sign up to request clarification or add additional context in comments.

2 Comments

Error: Cannot find module 'gulp-uglify-es'
@juFo did you install the package. npm install gulp-uglify-es --save-dev
63

To see the error in console:

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/'))
});

To find the exact file, with line number of error register and run this task:

var pump = require('pump');

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

1 Comment

pump was a life saver to identify the one line in my code that had ES6 syntax. Thanks!
23

I think the top answers here are not explaining how to get the error. The docs have a section on error handling:

gulp-uglify emits an 'error' event if it is unable to minify a specific file

So, just capture the error and do whatever you want with it (such as logging to console) to see the filename, line number, and additional info:

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

or in a larger context:

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('./'));

});

This gives you a super helpful error!

{ 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 }

3 Comments

This is exactly what I needed. The error wasn't even coming from the file I was saving! Thank you!
This helped me recover the error SyntaxError: Unexpected token: operator «>» because it doesn't know how to handle arrow functions yet :) thanks :)
this one not giving me this helpful error. still i get stackoverflow.com/questions/68274224/…
15

Have you used ES6 format in your script file? If so try ES5 now because when you do gulp-uglify it doesnt understand ES6 format as of now and after that try your code

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

and run the task gulp concat it will work

2 Comments

I suddenly ran into this error and had no clue until I see your mentioning of ES5 vs ES6, and realize I did copy&paste some code like "() =>" and once I revert it to ES5 function, it works again. Thanks!
it really is quite a bummer. this has been an open issue on github for 3 years. uglify should be able to handle ES6, we shouldn't have to transpile fat arrow functions just for minification purposes.
4

For me, it was a deprecated option "preserveComments" that generated the error (and completely crashed the script).

Found the issue using:

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

Comments

3

Try using this

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/'));
});

Comments

1

you may have syntax error or used ES6 syntax. you can try https://skalman.github.io/UglifyJS-online/ firstly.

Comments

1

The main error to Unable to minifies JavaScript is the path not found. You can use the task usemin For this you need:

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

and requires :

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()]

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.