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

總結

解決的方式雖然很簡單，可是關鍵的是要有定位問題的能力：輸出更多的錯誤日誌，瞭解相關原理大膽猜想，或者使用斷點調試的方式來定位問題。但願此思路能對你們解決構建問題能有所幫助，那麼就在開心不過了.