用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_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新爲: manifest[originalFile] = originalFile + '?v=' + file.revHash;

 

打開nodemodules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新爲: return filename + ext;

 

打開node_modules\gulp-rev-collector\index.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) ) {

 

 

dome地址  https://github.com/helijun/gulp