用Gulp構建你的前端專案

前言

前端技術發展日新月異，隨著模組化、元件化的提出，前端變得越來越複雜，靜態資源越來越多，那麼對靜態資源的處理，如壓縮，合併，去掉偵錯資訊.. 如果還是人工去處理，效率非常之低且還容易出錯，於是自動化的處理工具也就必然出現了。就像後端我們一般用maven管理專案，那麼前端gulp是個不錯的選擇。

什麼是Gulp

是一個基於 Node.js 流、Javascript語法的快速構建前端專案並減少頻繁的 IO 操作的自動化工具。

Gulp有什麼好處

易於學習使用

通過最少的API（核心.src()、.pipe()、.dest()、.watch()四個），以及程式碼優於設定的策略，讓簡單的任務簡單，複雜的任務可管理。

快速構建

利用 Node.js 流的威力，你可以快速構建專案並減少頻繁的 IO 操作，處理速度傳說是grunt的兩倍。

高品質的外掛

gulp社群擁有足夠滿足你需求的並且簡潔的外掛，當然你也可以自己動手寫一個！

gulp API

參見 http://www.gulpjs.com.cn/docs/api/

gulp構建

1 準備工作

>安裝node用戶端
下載網址https://nodejs.org/en/download/

>全域性安裝npm

npm 是 nodejs 的包管理和分發工具，全域性安裝 npm install -g

>全域性安裝gulp

npm install gulp --save-dev

save-dev 這個引數會將外掛資訊自動更新到 package.json 裡，其中的 devDependencies 屬性會隨外掛依賴的安裝解除安裝而改變

2 目錄結構

- - gulp

- - - - - -dist  //生產目錄

- - - - - -src  //開發目錄

- - - - - - - - - js

- - - - - - - - - css

- - - - - - - - - html

- - - - - -node_modules

- - - - - -gulpfile.js

- - - - - -package.json

3 關於package.json

mkdir gulp

cd gulp

在gulp目錄下執行 npm init 生成package.json檔案

安裝相關的依賴包

npm install gulp-uglify gulp-rename gulp-concat gulp-notify .. --save-dev

另外：對於完整的 package.json (比如github上淘下來的專案), 只需對整個專案執行 npm install 即可安裝 package.json 檔案中宣告的所有外掛模組

4 實現一個本地伺服器

在gulpfile.js檔案裡，新增依賴包

 

定義根目錄變數

 

定義一個task，埠為8888，根目錄為開發目錄

 

在node命令視窗裡執行

gulp server

出現這些說明成功了，這個時候在瀏覽器裡輸入localhost:8888即可看到本地開發目錄下的資料夾。這樣一來就相當於我們傳統使用的tomcat服務啟動，就可以進行下一部的開發工作了。

 

5. 資源實時更新

開發中我們經常需要按f5重新整理頁面開效果，那麼有了livereload這個外掛後，你可以徹底解放你的f5鍵了。

引入兩個依賴

 

建立watch task

watch()是gulp的核心API，這裡實時監聽開發目錄下的html檔案，同時依賴reload-dev任務，reload-dev裡面實現了connet外掛的reload()方法，注意：server一定要設定啟用 livereload: true

 

因為gulp task執行的時候並不一定是按順序的，所以新建一個任務，通過sunSequence外掛同步執行上面這兩個任務

 

node 控制台執行 gulp live，這個時候去編輯對應的html，按下儲存鍵，即可看到服務reload的紀錄檔

 

 livereload實時重新整理效果圖

6. 壓縮js

同樣的，也是新建一個task，.src()方法裡輸入開發環境的目錄檔案，首先通過.pipe()介面執行stripDebug()方法去掉所有的偵錯資訊，如果uglify()方法裡沒有帶其他引數，預設是不保留註釋的，接著用rename外掛重新命名一下檔案，最後通過.dest()介面輸出到生成目錄下。

 

同樣的在node命令視窗裡執行

gulp minjs

在dist目錄就可以看到多了一個js目錄，裡面的js全部已被壓縮，並且重新命名為xx.min.js

7. 壓縮css

跟壓縮js一樣

 

node命令視窗裡執行

gulp mincss

在dist目錄就可以看到多了一個css目錄，裡面的css全部已被壓縮，並且重新命名為xx.min.css

8. 合併js

一個頁面通常有多個js或者引入，當上產生環境的時候為了減少網路請求，最好先將資源合併一下，gulp方便快捷的幫助我們完成了這個步驟。

可以看到，合併js是用的concat這個介面，當然首先需要引入gulp-concat

 

task如下，

node命令視窗裡執行

gulp concatjs

最終在生產目錄下生成了一個concat檔案，裡面包含了一個合併的main.js

同樣的合併css步驟一樣，這裡不一一敘述。

9. 靜態資源新增版本號

前端靜態資源快取一直以來是一個梗，最簡單的方式是我們手動去資源後面新增版本號，如果資源一多，那真是個噩夢..  幸好有gulp-rev

首先新增依賴包

 

建立兩個task

 

node視窗裡執行gulp revCss 、gulp revJs後，對應的css、js目錄下分別生成了rev-manifest.json檔案。

revCollector外掛是根據rev-manifest.json 裡面的鍵值對，再對html進行md5比較，最終將有變化的html進行版本更新

建立處理html task

 

執行gulp revHtml後，會發現生產目錄下的html檔案參照的js/css自動新增的版本字尾

當然，後續更改了相關js/css後，需要再執行revCss和revJs，所以這裡也通過一個集合task有序的執行上面三個任務

 

 效果圖

有一點需要注意，我們通常期望新增的版本號是這樣子

 

可是gulp-rev預設類似是這樣 common911965ed05.js，是再重新生成了一個js檔案，隨著越來越多的版本更新，檔案越來越多，顯然不合適，那麼為了達到期望的效果，需要對其原始碼做如下相關的修改：

開啟node_modulesgulp-revindex.js 第144行 manifest[originalFile] = revisionedFile; 更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;

開啟nodemodulesgulp-revnodemodulesrev-pathindex.js 10行 return filename + '-' + hash + ext; 更新為: return filename + ext;

開啟node_modulesgulp-rev-collectorindex.js 31行 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) { 更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

本文永久更新連結地址：http://www.linuxidc.com/Linux/2016-12/138658.htm