Search code examples
javascriptnode.jsgulpuglifyjsgulp-uglify

How to use uglify-es with gulp?


I'm using gulp to uglify my files and it works fine for older Javascript.

There has already been a question about how to uglify an ES6-javascript file: how to uglify javascript classes?

That's because my code does not work (classes are ES5 or smth):

gulp.task('handleJs', () => {
  gulp.src('src/frontend/xy/js/file.js')
    .pipe(uglify());
}

The answer doesn't seem to be up-to-date anymore because uglify-js-harmony is deprecated (https://www.npmjs.com/package/uglify-js-harmony).

It says, I should use uglify-es (not -js) but I don't find a solution, how to use it with gulp? Which npm-packages do I really need for that and how does the code have to look like?


Solution

  • This is documented to a degree in the README for gulp-uglify. For clarity, I've slightly modified the example there to match your snippet.

    You need to npm install the pump, gulp-uglify, and uglify-es packages first (along with any other packages your project needs. Then, you can setup your gulp task similar to as follows:

    var uglifyjs = require('uglify-es');
    var composer = require('gulp-uglify/composer');
    var pump = require('pump');
    
    var minify = composer(uglifyjs, console);
    
    gulp.task('handleJs', function (cb) {
      var options = {};
    
      pump([
          gulp.src('src/frontend/xy/js/file.js'),
          minify(options),
          gulp.dest('dist')
        ],
        cb
      );
    });