Gulp uglify 因 js 解析错误而失败答案

【问题标题】：Gulp uglify fails with js parse errorGulp uglify 因 js 解析错误而失败
【发布时间】：2016-01-21 11:01:08
【问题描述】：

我正在为一个非常烦人的错误而苦苦挣扎。首先：我是 gulp 的新手。

我尝试使用 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 所做的异步工作引起的。可能是 uglify 插件试图对此时未完成的 useref 文件进行 uglify。怎么知道？

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

这就是我重现错误的方式： 1. gulp clean:dist

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

gulp 用户引用

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

gulp.task('minify', function() { return gulp.src('dist/**/*.js') /*.pipe(gulpIf('*.css', cssnano()))*/ .pipe(uglify()) .pipe(gulp.dest('dist')) });
对堆栈跟踪感到疯狂

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)

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

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

【问题讨论】：

我不知道为什么格式很烂。
ulp.task('useref', function() { 。检查您分享的这一行中“gulp”的拼写。
这只是复制粘贴失败。在我的 gulpfile.js 中是正确的。还是谢谢。
我不知道某些 ES6 特性是否存在错误，但请尝试在您的返回语句中添加 vorselektiertesProdukt:vorselektiertesProdukt 和 regObj:regObj 而不仅仅是 vorselektiertesProdukt 和 regObj跨度>
非常感谢扎卡里亚。我已经找到了，但如果您喜欢这些声誉，请发布答案，我会将其标记为正确。

标签： javascript angularjs gulp gulp-uglify

【解决方案1】：

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

转到node_modules/gulp-uglify/minifier.js 查找功能：var mangled = trycatch(function () {} 在返回之前写console.log(file.path); 保存文件然后重试，你会看到正在处理的文件

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

【讨论】：

这会告诉我输出文件，在我的例子中是 vendor.js，但要确定我需要从 uglify 中排除哪个 3rd 方组件，或者如何排除这一点并不容易。

【解决方案2】：

好的，看起来我找到了失败的语句。

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

vorselektiertesProdukt,
regObj,

【讨论】：

这是因为那不是有效的 JS 对象表示法。您正在尝试返回一个对象，而不是一个数组，因此它必须只包含键值对。所以你需要有{ key: value }，但你只有{ vorselektiertesProdukt, regObj }，也就是{ value, value }