Fixing Uglify Errors With Babel
Although I have been using ES6 in my newer projects, today I ran across an error 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-es2015Then 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 the package control we have.
A tech native with 20 years of experience across the digital space. Darryl is an evangelist for the power and disruption of blockchain technologies and fosters a passion for bringing ever greater utility and adoption to the masses.
