Gulp uglify因js解析错误而失败

时间:2016-01-21 11:01:08

标签: javascript angularjs gulp gulp-uglify

我正在为一个非常恼人的错误而苦苦挣扎。首先:我是新来的。

我尝试使用Angular实现单页面应用程序。为了使我的工作流程更好,我尝试实现gulp。

我在安装一些gulp插件时遇到了一些严重的npm错误,但这是另一个故事,我意识到,它有或没有错误。

我真正想到的是useref插件。或者更确切地说,uglify插件。

这是在我的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'))
});

这是它在尝试运行时抛出的堆栈跟踪。 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)

这个堆栈跟踪绝对没有对我说。

我观看了堆栈跟踪中列出的所有目的地,但未发现任何故障。

我认为这可能是由gulp所做的asynchrounus工作引起的。可能uglify插件试图在此时未完成useref文件的uglify。怎么知道?

所以我将所有内容分开以确保错误不是由重叠的插件引起的。

这是我如何重现错误: 吞咽干净:dist

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

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

  2. gulp minify

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

  3. 对堆栈跟踪感到疯狂

    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)

  4. 编辑确定...我的index.html文件中有大量的.js文件。我试图获取该文件,通过删除每个文件导致错误并尝试运行useref + minify。我明白了坏文件。当它从index.html中删除时,minify就像魅力一样。但我不知道,我做错了什么或可能导致错误。

    '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();
          }
        };
      });
    

2 个答案:

答案 0 :(得分:3)

如果有人面临同样的问题,我建议修改gulp代码以检查文件导致问题的原因。

转到node_modules/gulp-uglify/minifier.js 找到函数:var mangled = trycatch(function () {} 在返回之前写console.log(file.path); 保存文件然后再试一次,您将看到正在处理的文件

在错误是具有错误的文件之前,终端中出现最后一个文件路径。

答案 1 :(得分:1)

好的,看起来我找到了失败的声明。

我不明白为什么但是当我删除dienstleisterRegObjService.js的return对象中的语句时它可以工作:

vorselektiertesProdukt,
regObj,

有人能够解释我为什么不起作用?因为我在我的机器上运行应用程序时没有问题。