Gulp uglify 因 js 解析错误而失败

Question

I'm strugling over a very annoying error. First at all: I'm new to gulp.

I try to realise a single page application with Angular. To make my workflow better, I tried to implement gulp.

I was heading some serious npm errors while installing some gulp plugins, but this is another story and i realised, that it's working with or without errors.

What I'm actualy hit my head on is the useref plugin. Or more exact, the uglify plugin.

This is in my gulpfile.js:

gulp.task('useref', function() {
  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
});

An this is the stacktrace it throws when trying to run it. C:\\Work\\evori-portfolio>gulp useref

[16:32:40] Using gulpfile C:\Work\evori-portfolio\gulpfile.js
[16:32:40] Starting 'useref'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
 Error
    at new JS_Parse_Error (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1526:18)
    at js_error (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1534:11)
    at croak (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2025:9)
    at token_error (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2033:9)
    at expect_token (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2046:9)
    at expect (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2049:36)
    at eval (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2602:13)
    at eval (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2072:24)
    at expr_atom (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2532:35)
    at maybe_unary (eval at <anonymous> (C:\Work\evori-portfolio\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2708:19)

This stacktraces says absolutely nothing to me.

I watched at all of the destinations listed in the stacktrace and didn't found any failure.

I thought it could be caused by asynchrounus work that gulp does. Probably the uglify plugin tries to uglify the at this moment not finished useref file. How knows?

So I seperatet everything to be sure the error is not caused by overlapping plugins.

This is how i went through to reproduce the error: 1. gulp clean:dist

gulp.task('clean:dist', function() {
  return del.sync('dist')
});

2. gulp useref

   gulp.task('useref', function() { return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist')) });

3. gulp minify

   gulp.task('minify', function() { return gulp.src('dist/**/*.js') /*.pipe(gulpIf('*.css', cssnano()))*/ .pipe(uglify()) .pipe(gulp.dest('dist')) });

4. going crazy about the stack trace

   C:\\Work\\evori-portfolio>gulp minify [11:55:50] Using gulpfile C:\\Work\\evori-portfolio\\gulpfile.js [11:55:50] Starting 'minify'...

   events.js:141 throw er; // Unhandled 'error' event ^ Error at new JS_Parse_Error (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:1526:18) at js_error (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:1534:11) at croak (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2025:9) at token_error (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2033:9) at expect_token (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2046:9) at expect (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2049:36) at eval (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2602:13) at eval (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2072:24) at expr_atom (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2532:35) at maybe_unary (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2708:19) at expr_ops (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2743:24) at maybe_conditional (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2748:20) at maybe_assign (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2772:20) at expression (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2791:20) at eval (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2173:39) at eval (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2072:24) at block_ (eval at <anonymous> (C:\\Work\\evori-portfolio\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2352:20)

EDIT OK... I've got in my index.html file a huge load of .js-Files. I tried to get that file, that causes the error by removing each and try to run useref+minify. And I got it. The bad file. When it is removed from index.html, minify works like a charm. But I have no idea, what I'm doing wrong or could cause an error.

'use strict';

angular.module('previewApp')
  .factory('dienstleisterRegObjService', function() {

    /* Aktuell ausgewähltes Produkt */
    var vorselektiertesProdukt = {
      servicetyp: '',
      dienstleistungstyp: '',
      produkt: ''
    };

    /* Registrations Objekt; wird per API an Server übergeben */
    var regObj = {
      organisation: '',
      vorname: '',
      nachname: '',
      mail: '',
      nationalitaet: 'Schweiz',
      sprache: 'Deutsch',
      produkte: []
    };

    /* Reset Methods */
    var getNewVorSelektProd = function() {
      vorselektiertesProdukt.servicetyp = '';
      vorselektiertesProdukt.dienstleistungstyp = '';
      vorselektiertesProdukt.produkt = '';
    };

    var getNewRegObj = function() {
      regObj.organisation = '';
      regObj.vorname = '';
      regObj.nachname = '';
      regObj.mail = '';
      regObj.nationalitaet = 'Schweiz';
      regObj.sprache = 'Deutsch';
      regObj.produkte = [];
    };

    /* Service Objekt */
    return {
      vorselektiertesProdukt,
      regObj,
      addProduct: function(servicetyp, dienstleistungstyp, produktparam) {
          var produkt = {};
          produkt.servicetyp = servicetyp;
          produkt.dienstleistungstyp = dienstleistungstyp;
          produkt.produkt = produktparam;
          regObj.produkte.push(produkt);
      },
      deleteProduct: function(produkt) {
        var index = regObj.produkte.indexOf(produkt);
        regObj.produkte.splice(index, 1);
      },
      resetVorSelektProd: function() {
        getNewVorSelektProd();
      },
      resetRegObj: function() {
        getNewRegObj();
      },
      resetAllObj: function() {
        getNewVorSelektProd();
        getNewRegObj();
      }
    };
  });

Answer 1

In case someone faces the same issue i Suggest to modify the gulp code to check what the file causes the problem.

go to node_modules/gulp-uglify/minifier.js find the function : var mangled = trycatch(function () {} before return write console.log(file.path); save the file then try again, you will see the files which is processing

the last file path appears in the terminal before the error is the file which has the error.

Answer 2

Ok, looks like I found the statement where it fails.

I don't understand why but it works when I remove the statements in the return object of dienstleisterRegObjService.js:

vorselektiertesProdukt,
regObj,