Gulp自動構建Web前端程序

這兩天一個朋友在項目上碰到了一個這樣的問題，在運營過程當中，用戶在瀏覽器上對某個表單進行數據提交時，須要引入新的平臺接口數據的業務，經過評估，開發團隊立刻修改了相關後臺代碼和部分的前端腳本代碼，經過簡單測試並很快上線。當是上線後客戶端的功能沒有發生任何變化和修改前表現的情況是同樣。遇到這樣的問題，開發團隊一時有點迷糊，明明是修改了功能並進行了部署卻沒有讓用戶使用到該功能，不知道該如何下手了。

有過必定前端開發經驗的朋友應該知道這是瀏覽器緩存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編譯等，能夠知足常規前端軟件開發、調試、構建、部署等功能須要。

總結

若是開發團隊具有DevOps支撐自動化平臺工具（如Docker、TFS、Jira、Jenkins等集成平臺工具）和思惟模式，能夠把前端的自動構建有效集成在軟件開發、測試、發佈和運維過程當中，進一步增強團隊軟件過程的自動化能力，提高團隊效率、創新能力和生產力。