gulp构建问题排查

最近在对老项目(多老呢..可能是几年前的吧,比自己入职的时间还久>_<)进行修改。很多时候发现改代码比较简单，但是不简单的是构建问题。笔者在构建的项目是使用的gulp,发现在构建的时候遇到问题，本篇文章主要记录发现问题和解决问题的过程，提供解决构建问题的思路，希望对遇到同样问题的伙伴有所帮助

构建配置

项目中使用的构建工具gulp,gulp 是一个基于流的构建工具，可以自动执行指定的任务,想了解更多参考gulp官网。其中有一个指令是使用gulp-webpack 进行js 打包、gulp-uglify 进行压缩，具体内容如下：

gulp.task("webpack", function() {
    return gulp.src("./js/index.js")
        .pipe(webpack(webpackConfig))
        .pipe(uglify({ mangle: false }))
        .pipe(gulp.dest(path.build + "/js/"));
   
});
//
webpack.config.js
module.exports = {
        entry:{
            "index":"./js/index.js"
        },
        output:{
            filename: "[name].js",
        },
        plugins: [//...]
}

遇到的问题

执行指令之后发现并未顺利的在build 的文件夹中找到index.js,具体错误内容如下：

internal/streams/legacy.js:57
      throw er; // Unhandled stream error in pipe.
      ^
Error
    at new JS_Parse_Error (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1526:18)
    at js_error (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1534:11)
    at croak (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2026:9)
    at token_error (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2034:9)
    at unexpected (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2040:9)
    at expr_atom (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2542:13)
    at maybe_unary (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2716:19)
    at expr_ops (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2751:24)
    at maybe_conditional (eval at <anonymous> (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2756

如何定位

1.输出更多的错误日志

根据错误提示是gulp 在进行代码压缩的时候报错，因此想能够输出更多的日志呢，给uglify加入错误捕获

`.pipe(uglify({ mangle: false }).on('error', function (err) { console.log( err ) }))`

在进行构建后错误日志如下：

message:
   'D:\\git\\study\\yyb_test\\index.js: Unexpected token: punc ())',
  fileName: 'D:\\git\\study\\yyb_test\\index.js',
  lineNumber: 148,
  stack:
   'Error\n    at new JS_Parse_Error (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:1526:18)\n    at js_error (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:1534:11)\n    at croak (eval
at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2026:9)\n    at token_error (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2034:9)\n    at unexpected (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2040:9)\n    at expr_atom (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2542:13)\n    at maybe_unary (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2716:19)\n    at expr_ops (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2751:24)\n    at maybe_conditional (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2756:20)\n    at maybe_assign (eval at <anonymous> (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), <anonymous>:2780:20)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

2.根据错误关键词搜索
根据关键词 Unexpected token: punc ())进行Google后发现，原来是代码中有 ES6语法。那么解决方案就是将ES6 的代码转为 ES5，那么如何定位具体的位置呢。

3.问题位置定位
在输出错误信息的时候有个lineNumer: 148，这个是什么呢。根据uglify 的原理应该是讲构建源码进行压缩，因此猜测是否是压缩代码的输入内容，因此尝试去掉uglify压缩功能。
去掉压缩功能后在bulid/index.js生成对应的文件，快速查找到最后148行后发现如下：

原来是我们自己的npm 模块中有个箭头函数。
4.解决问题
修改对应的npm 包中箭头函数语法并npm publish，更新npm 包后再构建，发现就成功了！！

[17:30:50] Starting 'webpack'...
[17:30:50] Version: webpack 1.12.14
   Asset     Size  Chunks             Chunk Names
index.js  16.5 kB       0  [emitted]  index
[17:30:50] Finished 'webpack' after 328 ms

总结

解决的方式虽然很简单，但是关键的是要有定位问题的能力：输出更多的错误日志，了解相关原理大胆猜测，或者使用断点调试的方式来定位问题。希望此思路能对大家解决构建问题能有所帮助，那么就在开心不过了.