前端構建系統 Gulp 的使用與常用插件推薦 - 上篇

01-28

隨著 Web 前端發展，前端項目變得越來越複雜，隨之而來的是各種方便的工具：打包工具、轉碼工具、 JS 與 CSS 的合併壓縮工具等等。這些工具極大的提高了我們前端的代碼質量，但問題也隨之而來：

這麼多工具到底該怎麼使用，難道一個個在各個工具中來回切換複製粘貼？或是在 CLI 里一條條地敲命里嗎？敲完代碼還要敲一堆的構建命令，說不準順序搞錯了還要功虧一簣重來一遍？納尼？！！

於是構建系統應運而生，Gulp, Grunt, Browserify, etc.

使用構建系統的好處顯而易見，就是一次配置，自動構建，省心省力妙不可言（怎麼像廣告詞 orz）

此外因為配置文件的高度統一，這個配置文件幾乎可以多個項目之間隨便複製粘貼修修改改就可以重複使用！

不過可用的構建系統有很多，為避免引起聖戰這裡不做討論 _(:зゝ∠)_，我就用 Gulp ~

好嘞，廢話說了這麼多，下面進入正文：

由於篇幅稍長，可能對移動端閱讀體驗不太好，拆成兩篇發好嘞
本篇內容:

Node 與 Gulp 的安裝

為靜態文件添加 MD5 指紋

生成 Source Map

靜態文件的合併與壓縮

Node 與 Gulp 的安裝

參考：從零開始：現在開始用ES6寫代碼，使用 Babel 對 ES6 進行轉碼也就不在這裡啰嗦嘞~

為靜態文件添加 MD5 指紋

使用 Gulp 自動對 HTML 中引用的靜態文件添加 MD5 指紋戳，有效解決舊文件緩存，新文件無法更新的問題。

這部分有兩種解決方案

1. 將 MD5 指紋寫入文件名

- 效果：<script src=BearD01001-366dc531e1.min.js></script>

- 優點：幾乎可完美規避更新時短時間內客戶端請求結果不一致的問題

- 缺點：每次修改文件都會產生一個新文件，易造成文件冗餘

- 建議：推薦流量大、或沒有絕對高峰期只有相對高峰期的大型 Web 系統使用

- 插件：gulp-rev

2. 寫至文件引用 URI 的 query 中

- 效果：<script src=BearD01001.min.js?rev=366dc531e1></script>

- 優點：每次更新不會產生新文件，有效避免文件冗餘

- 缺點：更新時短時間內，客戶端請求到的靜態文件可能不一致，造成非預期結果

- 建議：推薦流量小、或可規避高峰期更新的 Web 系統使用

- 插件：gulp-rev-append

兩種解決方案優缺點已經說明，兩個插件的使用方法也很簡單，直接 pipe 到插件中就 OK ，這裡不多廢話嘞~

var gulp = require(gulp);n var rev = require(gulp-rev);n // var revAppend = require(gulp-rev-append);n gulp.task(html, () => {n gulp.src(*.html)n .pipe(rev())n // .pipe(revAppend())n .pipe(gulp.dest(./));n });n

生成 Source Map

說到 Source Map 可能會有些小夥伴兒有些陌生，說白了這貨就是在轉碼編譯之前的文件與之後的文件生成一個字元對照表（深入了解參考 >> JavaScript Source Map 詳解）。

這樣在瀏覽器開發者工具中，只要開啟 sourcemaps ，調試過程中就可以在開發者工具中直接看到編譯前的源文件，而不是編譯後的文件。

如果出現問題也是直接報出問題出在源文件的哪行哪列，Debug 起來相當方便！

插件

- gulp-sourcemaps

簡介

額(⊙_⊙)...上邊好像說的差不多了

使用

1. 一般使用方法（不推薦）

gulp.task(javascript, () => {n gulp.src(src/**/*.js)n .pipe(sourcemaps.init())n .pipe(plugin1())n .pipe(plugin2())n .pipe(sourcemaps.write())n .pipe(gulp.dest(dist));n });n

不推薦的原因是 gulp-sourcemaps 插件默認會將文件對照表信息全部寫入轉碼編譯後的文件末端。
一般這個對照表的信息量還是很大的，這對生產線上瀏覽器請求載入文件無疑是無用額外的開銷，手動去除也是一件很低效費時的工作。

2. 指定輸出路徑（推薦）

gulp.task(javascript, () => {n gulp.src(src/**/*.js)n .pipe(sourcemaps.init())n .pipe(plugin1())n .pipe(plugin2())n .pipe(sourcemaps.write(_srcmap))n .pipe(gulp.dest(dist));n });n

這裡在 sourcemaps.write() 中傳入了一個字元串 _srcmap，用來指定 Source Map 即對照表的存儲路徑。

這樣指定輸出路徑之後，文件編譯轉碼完只會在最後一行只會寫入對 Source Map 的文件引用，而 Source Map 對照表本身會被輸出到指定的路徑下：

//@ sourceMappingURL=_srcmap/BearD01001.js.mapn

這樣在開啟瀏覽器開發者工具後，開發者工具就會自動去匹配 Source Map 了。

而生產線上則完全不用擔心

1. 誰會把 Source Map 文件放到生產線上？

2. 即使真的放上了，如果開發者工具未打開，瀏覽器也不會去載入這個文件。

靜態文件的合併與壓縮

JS、CSS文件的合併壓縮應該是產品上線前最常見的需求了。

不再需要你在各個 JS / CSS 壓縮合併的工具中切來切去，也不需要你在各個 IDE 或是 Editor中複製粘貼手動拼接合併，這些繁瑣低效的工作正是 Build System 要幫你解決的！

接下來要介紹的這幾個插件都非常常用，也有許多文章介紹了使用方法，就不多加說明了，動動手搜一搜吧！

JS 的壓縮

插件

- gulp-uglify

簡介

使用 UglifyJS 壓縮 JS 文件

CSS 的壓縮

插件

- gulp-clean-css

！注意！ 搜索 CSS 壓縮工具的時候極有可能搜到 gulp-minify-css，該插件已被棄用

簡介

使用 clean-css 壓縮 CSS 文件

JS / CSS 的合併

JS 或 CSS 文件的合併都是使用同一款插件 gulp-concat。

插件

- gulp-concat

簡介

合併 JS 或 CSS 文件

好嘞，上篇就整理好了，希望對你有所幫助。

如有問題，歡迎提出指正。（吐槽：破乎啥時候能支持 Markdown？！）

下篇內容概要：

文件重命名

自動合併雪碧圖

小圖標轉碼為內聯 base64

構建異常捕獲

使用 watch 插件提高構建效率

其他提高構建體驗的插件

下篇：前端構建系統 Gulp 的使用與常用插件推薦 - 下篇