Fixing Uglify Errors With Babel

Whilst I am a huge fan of ES6, and I use it in my newer projects, I ran across an error today that proved troublesome to resolve (partly as the error thrown was barely useful!).

events.js:163
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
    at createError (/x/x/x-x/node_modules/gulp-uglify/lib/create-error.js:6:14)
    at wrapper (/x/x/x-x/node_modules/lodash/_createHybrid.js:87:15)
    at trycatch (/x/x/x-x/node_modules/gulp-uglify/minifier.js:26:12)
    at DestroyableTransform.minify [as _transform] (/x/x/x-x/node_modules/gulp-uglify/minifier.js:76:19)

To save everyone else the couple of hours I lost, the issue arose because increasing the modules I load in from npm and bower are using ES6 formatting, and these were causing the error, as uglify() does not support ES6. I mistakenly thought this wouldn't be an issue as I wasn't using any ES6 changes in my code - forgetting the packages!

As is typical - once the problem is identified, the solution is easy.

$ npm install --save-dev gulp-babel babel-preset-es2015

Then to my browserify Gulp task I made this change, from;

    return stream.on('error', handleErrors)
      //
      .pipe(gulpif(global.isProd, streamify(uglify())))
      .pipe(gulp.dest(config.scripts.dest))
      //

To this;

    return stream.on('error', handleErrors)
      //
      .pipe(streamify(babel({ presets: ['es2015'] }))) // added Babel pipe
      .pipe(gulpif(global.isProd, streamify(uglify())))
      .pipe(gulp.dest(config.scripts.dest))
      //

I would thoroughly recommend this gets added to build scripts to cover your bases when it comes to third-party packages. On another note I am now investigating Yarn to help solve some issues with package control we have.