2

I'm working on a HTML/JS/CSS website and I use Gulp as automation tool.

It works perfectly fine when running gulp serve but I receive the following errors when running gulp build:

[18:24:52] Using gulpfile myProject/gulpfile.js
[18:24:52] Starting 'jshint'...
[18:24:52] Starting 'css'...
[18:24:52] Starting 'scripts'...
[18:24:52] Starting 'partials'...
[18:24:52] Starting 'images'...
[18:24:53] Starting 'videos'...
[18:24:53] Starting 'fonts'...
[18:24:53] Starting 'fileinclude'...
[18:24:53] Starting 'extras'...
[18:24:53] Finished 'jshint' after 518 ms
[18:24:53] all files 48.19 kB
[18:24:53] Finished 'fileinclude' after 245 ms

events.js:154
      throw er; // Unhandled 'error' event
      ^
Error
    at new JS_Parse_Error (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at unexpected (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)
    at expr_atom (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2618:13)
    at maybe_unary (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
    at expr_ops (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2827:24)
    at maybe_conditional (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:20)
    at maybe_assign (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2856:20)
    at expression (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2875:20)
    at expr_atom (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2608:26)
    at maybe_unary (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
    at expr_ops (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2827:24)
    at maybe_conditional (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:20)
    at maybe_assign (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2856:20)

Here is an extract of gulpfile.js: 

/*global -$ */
'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var sass = require('gulp-ruby-sass');
//var concat = require('gulp-concat');  
var rename = require('gulp-rename'); 
var gulpUtil = require('gulp-util');  
var uglify = require('gulp-uglify');  

//script paths
var jsFiles = 'app/scripts/**/*.js',  
    jsDest = 'dist/scripts';

gulp.task('scripts', function() {  
    return gulp.src(jsFiles)
        //.pipe(concat('main.js'))
        .pipe(rename('main.min.js'))
        .pipe(uglify()) // issue comes from here
        .pipe(gulp.dest(jsDest));
});

gulp.task('build', ['jshint','css', 'scripts', 'partials', 'images', 'videos', 'fonts', 'fileinclude', 'extras'], function () {
  return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});

gulp.task('default', ['clean'], function () {
  gulp.start('build');
});

As the error messages seem to be related to uglify-js, I tried to comment out the uglify() call in the scripts task and it compiled fine.

Would you have any idea why this is happening?

Fred
  • 639
  • 4
  • 14
  • 27
  • Please show us a [mcve]. It's unclear what's happening without it. – Emile Bergeron Jun 16 '17 at 17:38
  • @EmileBergeron Added the full content of gulpfile.js. Hope it's easier to troubleshoot now. Thanks for your help! – Fred Jun 19 '17 at 14:03
  • Try each gulp task individually, find which one is the problem, then remove any unrelated code from your question so we can focus only on the relevant parts. That's how you should do a [mcve]. – Emile Bergeron Jun 19 '17 at 14:10
  • You should also show us the command you're running, and the simplest directory structure example you've tried on (like with only one file, with no files, with a different file). – Emile Bergeron Jun 19 '17 at 14:24
  • 1
    @EmileBergeron I followed your advice and found out the issue was actually related to `gulp-uglify`. Edited my post accordingly. – Fred Jun 19 '17 at 17:37
  • You should now update the command you're running (probably `gulp scripts`) with its console output. – Emile Bergeron Jun 19 '17 at 17:45
  • You could also remove the watch, build and default tasks from the question, in addition to removing any unrelated node package loaded (`browserSync`, `$`, `reload`, etc.) – Emile Bergeron Jun 19 '17 at 17:48
  • @EmileBergeron I did update the command I run for this issue to happen: `gulp build`. I also updated the console output. – Fred Jun 20 '17 at 12:33
  • If you only run `gulp scripts`, is the problem happening? – Emile Bergeron Jun 20 '17 at 13:11
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147172/discussion-between-surreal-and-emile-bergeron). – Fred Jun 20 '17 at 13:43

2 Answers2

4

After searching for 2 days I found that I was let keyword, I replaced it with var and everything is working now. uglify does not know what to do with let keyword. What a crap!!!

Kishan S. Rakholiya
  • 379
  • 2
  • 13
  • Oh my god I fell into the same trap... Thought i was being clever and modern by using let but that cost me half a day of debugging.. Thank you @Kishan S. Rakholiya you saved me more headache! – Tommi Sep 29 '22 at 11:57
2

As advised in this post, I installed the gulp-util package and used its log() method to have more details about this error 

var gulpUtil = require('gulp-util');
gulp.task('scripts', function() {  
    return gulp.src(jsFiles)
        .pipe(rename('main.min.js'))
        .pipe(uglify().on('error', function(e){
            console.log(e);
            return this.end();
         }))
        .pipe(gulp.dest(jsDest));
});

And here is the error message I got:

{ [Error: myProject/app/scripts/main.min.js: SyntaxError: Unexpected token: punc ())]
  message: 'myProject/app/scripts/main.min.js: SyntaxError: Unexpected token: punc ())',
  fileName: 'myProject/app/scripts/main.min.js',
  lineNumber: 114,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)\n    at unexpected (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)\n    at expr_atom (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2618:13)\n    at maybe_unary (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)\n    at expr_ops (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2827:24)\n    at maybe_conditional (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:20)\n    at maybe_assign (eval at <anonymous> (myProject/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2856:20)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

I checked line 114 from main.js and found out I left an ES6 syntax there which uglify didn't understand. I converted it to ES5 and it worked fine.

Fred
  • 639
  • 4
  • 14
  • 27