使用 Gulp 打包 JavaScript 解決循環相依 (Circular dependencies) 問題

快速、遞迴相依、最小化

目標

把舊專案中 JavaScript 檔案從 ASP.NET 原生 bundle 機制，為了上 CDN 伺服器，轉為使用手動打包 JavaScript 檔案。

為什麼不使用 Webpack？

因為手上的專案已經行之有年，如果要改為 import / require 的模式來拆分模組幾乎是不可能的，已經有太多的循環相依 (Circular dependencies) 問題無法解決，我們需要一個「快速轉換」又「不失去原本模式」的方法。

使用 Webpack 會遇到的問題

1. library 的 JavaScript 檔案通常都有遇到使用 webpack 打包時，會去 require 其他的 library，這個時候因為你的 library 並不是用 npm install 所以他就會找不到目標而產生 error。

這邊每個 library 會有不同的解法，如果是真的存在「被 require 的 library 」在專案中，那可以用 webpack alias 解決！但如果是沒有在專案當中的，就只能用 webpack IgnorePlugin 來解決！

2. 打包後的檔案，因為 webpack 會在 uglify 的時候幫你的變數「換名稱」，所以如果你打包的時候不是只產生一個檔案，而且打包的各個檔案之間有循環相依，這時候就會找不到其他 JavaScript 檔案所宣告的變數。

3. 使用的 library 有些關鍵字會被「改名稱」導致找不到 global 變數，像是：jqeury 打包起來，但這樣你就會沒辦法在 global 變數中找到 $ 的關鍵字。

變數命稱上的問題都要靠 webpack definePligin / alias / expose-loader 來解決，但我自己在使用上好像還是會遇到一些問題，而且設定上挺複雜的，搞了快一整天我就放棄了…

Gulp 的優缺點與使用情境

優點

1. 設定簡單 (相較 webpack)
2. 打包速度快 (沒有 uglify 的情況下很明顯，uglify 情況差距較小)
3. 一樣可以使用 babel 轉譯
4. 適用於循環相依的舊專案

缺點

1. 無法處理 module 化的 dependency
2. 沒有太多的強化功能可以使用 (相較 webpack 的 loader 或是 plugins)
3. 詳細設定上相較 webpack 少了非常多

安裝

npm 安裝 dependency

$ yarn add gulp gulp-concat gulp-uglify --dev

package.json 新增 script

"scripts": {
  "gulp": "gulp"
}

專案根目錄新增 gulpfile.js

const gulp = require('gulp');
// 打包多個檔案為一個檔案需要使用 gulp-concat
const concat = require('gulp-concat');
const gulpUglify = require('gulp-uglify');
// 定義 gulp task
gulp.task('taskA', function () {
// 要打包 JavaScript 的 source code  
  gulp.src([
    'a.js',
    'b.js',
    'c.js'
  ])
    .pipe(concat('bundle.js')) // 打包起來輸出的檔案名稱
    .pipe(gulpUglify())  // uglify
    .pipe(gulp.dest('javascript/minify')); // 輸出路徑
});
// gulp 要做的 task 列表，gulp 會依照順序執行
gulp.task('default', [
  'taskA'
])

跑 bundle ，就完成囉！

$ yarn run gulp

小彩蛋

這個動作可以綁在 Jenkins 上，讓 Jenkins 在 build code 的時候幫你下這個指令 ( 記得要先 $ npm install不然 Jenkins 會不認識這個指令唷！)，不需自己手動產 bundle 檔案，讓他「自動化」，這也是 devOps 的一環唷！

俗話說：會花你超過 90 秒的事情都該被自動化！

還不知道 Jenkis 是什麼嗎？

軟體開發 devOps 的 CI (Continuous Integration) 重要環節之一，網路上有很多資訊，快去查吧！

要注意的雷

Gulp 不會幫你管理 dependency，也因為 JavaScript 會有執行順序上的問題，所以當你的網站跑起來的時候，請注意有沒有 undefine 的 error，如果沒有那恭喜你成功了，如果有 undefine 的 error，代表你的 gulp src 當中的 array 順序有問題，把握「定義在前、使用在後」這個順序，你就能把 undefine 問題一步一步修完！

以上

記錄一下，也希望有幫助到你的問題，讓你在舊的專案也能使用新的技術開發！