Issue with Babel, ES6 and Uglify

[lewiswalsh]

Here is my gulp task:

gulp.task('js', function(){
    return gulp.src(paths.src.js)
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist.js));
});

And here is the error I get if I use any ES6, even a simple let statement. If I stick with ES5 everything works fine:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error
    at new JS_Parse_Error (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1508:18)
    at js_error (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1516:11)
    at croak (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2008:9)
    at token_error (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2016:9)
    at unexpected (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2022:9)
    at semicolon (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2042:43)
    at simple_statement (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2222:73)
    at eval (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2095:19)
    at eval (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2055:24)
    at block_ (eval at <anonymous> (...\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2335:20)

A test js file that is failing:

(function(window,document,undefined){
    jQuery(document).ready(function($){
        let test = 5;
    });
})(this, document);

Update
Tested on Windows 10 and Ubuntu 14.04 both with Node 4.1.2

[loris]

@lewiswalsh to solve this you need to use the es2015 preset from babel (https://babeljs.io/docs/plugins/preset-es2015/)

[terinjokes]

As noted above by @loris, this would be resolved by needing to use the es2015 Babel plugin.

I'll happily accept a pull request adding this as an example recipe. 🍰

[HyperBrain]

IMHO the use of the es2015 preset is not a proper workaround when targeting Node 4 as code will be transpiled to ES5 and not ES6! Are there any plans to reopen this task or add the proper functionality?

[yuricamara]

I agree with @HyperBrain since I want to use ES6 code in some cases.

[terinjokes]

@HyperBrain UglifyJS (which this plugin uses) is working on ES6 support, I have no control over their development process.

Since I originally closed this issue, I've added a section to the README on how to use a different version of UglifyJS with this plugin. Some folks have had success using uglify-js-harmony.

[yuricamara]

Nice @HyperBrain . It worked with uglify-js-harmony! Thank you very much!

[HyperBrain]

@yuricamara Thanks belong to @terinjokes :-) He made clear what to do in the README.

[yuricamara]

Thanks @terinjokes. But, It think it needs to mention there, that uglify-js-harmony works with ES6. I will suggest an update through a PR.

[dtturcotte]

@terinjokes can you provide an example of how to use uglify-js-harmony with piping or pump? I need to use uglify-js-harmony as I am using a bit of ES6 in my project. I am first testing with this snippet in one of my controllers:

  var tester = function (...n) {
    console.log(n);
  };

  tester(1, 2, 3, 4);

For example, this is my gulp task. I am using uglify within the pump but am getting error

Error: StringMap expected string key

var uglify = require('gulp-uglify');
var HarmonyUglifyJS = require("uglify-js");  //uglify-js-harmony 
var minifier = require('gulp-uglify/minifier');
...

gulp.task('scripts-prod', function (cb) {

  var options = {
    preserveComments: 'license'
  };

  pump([
        gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates)),
        plugins.if(/html$/, buildTemplates()),
        plugins.concat('app.js'),
        plugins.ngAnnotate(),
        minifier(options, HarmonyUglifyJS),
        plugins.rev(),
        gulp.dest(paths.distJavascript),
        plugins.rev.manifest({path: 'rev-manifest.json'}),
        gulp.dest(paths.distJavascript)
    ],
    cb
  );
});

[terinjokes]

@dtturcotte uglify-js-harmony hasn't been updated in 9 months, so it's pretty old. If you're using gulp-uglify version 2.0.0, I think you're going to have to downgrade to the last 1.x release: the API I'm calling in UglifyJS changed a few months ago (thus why there was a major version bump).

[dtturcotte]

@terinjokes okay I decided to transpile using

    .pipe(babel({
        presets: [es2015]
    }))

Then

.pipe(babelminify())

Full task:

var babel  = require('gulp-babel');
var es2015 = require('babel-preset-es2015');
var babelminify = require('gulp-babel-minify');
...
gulp.task('scripts-dev', () => {
  return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
    .pipe(plugins.if(/html$/, buildTemplates()))
    .pipe(babel({
        presets: [es2015]
    }))
    .pipe(babelminify())
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.concat('app.js'))
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest(paths.tmpJavascript))
    .pipe(plugins.connect.reload());
});

This transpiles and minifies the code fine, except I get this error in browser:

Error: [$injector:nomod] Module 'app' is not available!

More on this issue here if you can help: http://stackoverflow.com/questions/40772301/gulp-babel-with-angular-error-module-app-is-not-available