使用 Gulp 打包 JavaScript 解決循環相依 (Circular dependencies) 問題
快速、遞迴相依、最小化
目標
把舊專案中 JavaScript 檔案從 ASP.NET 原生 bundle 機制,為了上 CDN 伺服器,轉為使用手動打包 JavaScript 檔案。
為什麼不使用 Webpack?
因為手上的專案已經行之有年,如果要改為 import / require 的模式來拆分模組幾乎是不可能的,已經有太多的循環相依 (Circular dependencies) 問題無法解決,我們需要一個「快速轉換」又「不失去原本模式」的方法。
使用 Webpack 會遇到的問題
- 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 的優缺點與使用情境
優點
- 設定簡單 (相較 webpack)
- 打包速度快 (沒有 uglify 的情況下很明顯,uglify 情況差距較小)
- 一樣可以使用 babel 轉譯
- 適用於循環相依的舊專案
缺點
- 無法處理 module 化的 dependency
- 沒有太多的強化功能可以使用 (相較 webpack 的 loader 或是 plugins)
- 詳細設定上相較 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 問題一步一步修完!
以上
記錄一下,也希望有幫助到你的問題,讓你在舊的專案也能使用新的技術開發!