Gulp自動構建Web前端程式

標籤：過程   根目錄   自己   效率   too   efault   運營   通過   提升   

這兩天一個朋友在項目上碰到了一個這樣的問題，在運營過程中，使用者在瀏覽器上對某個表單進行資料提交時，需要引入新的平台介面資料的業務，通過評估，Team Dev馬上修改了相關後台代碼和部分的前端指令碼代碼，通過簡單測試並很快上線。當是上線後用戶端的功能沒有發生任何變化和修改前表現的狀況是一樣。遇到這樣的問題，Team Dev一時有點迷糊，明明是修改了功能並進行了部署卻沒有讓使用者使用到該功能，不知道該如何下手了。

有過一定前端開發經驗的朋友應該知道這是瀏覽器緩衝Web資源導致的問題，針對這樣的實際問題，項目上應該有自己的應對方法。類似這樣的需求，也催生了很多優秀的解決方案和優秀的前端構建技術架構，比較Grunt和Gulp。

針對前端構建技術架構的技術，網上有許多朋友分享自己的寶貴經驗和詳盡的分享總結，比如 http://www.cnblogs.com/cnblogsfans/p/5093012.html 中系列的文章。

下面是我個人進行Gulp學習和應用的過程記錄，包括環境搭建（win7作業系統）和初步使用。

1， 安裝Node.js

2， 準備專案檔

 

 

建立檔案夾，並在scripts檔案中添加如下內容的兩個指令檔

 

 

 

 

3， 安裝Gulp

在Cmd中定位到專案檔根目錄，運行 “npm install --save-dev gulp”

 

 

4， 安裝Gulp中可以合并指令檔的gulp-concat外掛程式

在Cmd項目根目錄位置運行“npm install --save-dev gulp-concat”

 

 

5， 在項目根目錄添加一個名字為gulpfile.js, 作用類同與Docker中makefile檔案。

var gulp = require("gulp");var concat = require("gulp-concat");gulp.task(‘default‘, function(){console.log(‘---------Begin building----------‘);gulp.src(‘scripts/*.js‘).pipe(concat(‘allModule.js‘)).pipe(gulp.dest(‘builded‘));
console.log(‘---------End building----------‘);});

 

6， 構建結果

 

 

把檔案moudle1.js 和 module2.js內容合成在一個檔案中的構建結果。

Gulp上的外掛程式有各類檔案壓縮、代碼檢查、Less和Sass編譯等，可以滿足常規前端軟體開發、調試、構建、部署等功能需要。

總結

如果Team Dev具備DevOps支撐自動化平台工具（如Docker、TFS、Jira、Jenkins等整合平台工具）和思維模式，可以把前端的自動構建有效整合在軟體開發、測試、發布和營運過程中，進一步加強團隊軟體過程的自動化能力，提升團隊效率、創新能力和生產力。

Gulp自動構建Web前端程式