目標

前端的工作流程一些是這樣： 寫程式碼-》程式碼檢查-》測試-》檔案合併、壓縮-》釋出

前面的程式碼檢查和測試我還沒有做，不過目前我需要工具可以幫我做的事有下面兩個：

1. 能夠幫我合併壓縮程式碼
2. 為了避免瀏覽器快取問題，對於新發布的程式碼，需要能加上md5值，並且能自動修改我的html中對js/css的引用

安裝

1. 先從官網安裝node.js,裡面會帶有npm工具。
2. 再用npm來安裝gulpnpm install --global gulp
3. 進入專案目錄，再安裝一下專案的依賴npm install --save-dev gulp, –save-dev會自動加入到package.json中
4. 每一個專案都需要一個gulpfile.js檔案，我們後續的程式碼和配置就都在這個檔案裡面了,下面是一個例子： 
   var gulp = require('gulp');gulp.task('default', function() {// 將你的預設的任務程式碼放在這});
5. 測試一下，看是否OK了，直接執行gulp吧。 
   

專案

我的專案是直播系統前端，主要功能是:

• 直播主頁
• 列表頁
• 個人資訊頁
• 直播頁面，分Web/PC/Mobile/端，每個端頁面不一樣
• PC聊天頁面
• 直播頁面又分jwplayer7與jwplayer6的播放器
• 再加上語音WebRTC功能

專案Git地址在這裡,純前端程式碼在src/main/webapp/live目錄中。

專案中已有package.json，checkout之後，直接執行npm install 會下載所有的依賴。然後再gulp會生成目標的html和js,這些檔案可以用ftp直接放到tomcat的伺服器中進行使用,請不要把這些檔案用git上傳。

至於CDN上傳，可以走公司內部的CDN重新整理功能上線就可以了。舊的檔案可以不用管，所以不會有覆蓋上線的問題。

程式碼

 
var gulp = require('gulp');

var concat = require('gulp-concat'); // 拼接工具
var uglify = require('gulp-uglify'); // 壓縮工具
var rev = require('gulp-rev');       // 加md5字尾的工具
var revCollector = require('gulp-rev-collector'); //與rev共同使用
var useref = require('gulp-useref'); // 替換檔案中的連結的工具,一般與gulp-rev共同使用
var minifyCss = require('gulp-minify-css'); // 壓縮css工具
var del = require('del');
var gulpSequence = require('gulp-sequence');

// 任務處理的檔案路徑配置
var paths = {
    indexJs: [
        'compress/LivePlatform.js',
        'compress/playerConfig.js',
        'compress/chat.js',
        'compress/netOptimize.js',
        'compress/recordChat.js',
        'compress/question.js',
        'compress/liveEmotion.js',
        'compress/pageinfo.js'
    ],
    homeJs: [
        'compress/LivePlatform.js',
        'compress/home.js'
    ],
    liveListJs: [
        'compress/LivePlatform.js',
        'compress/liveList.js'
    ],
    myLiveJs: [
        'compress/LivePlatform.js',
        'compress/myList.js'
    ],
    homeMobileJs: [
        'compress/LivePlatform.js',
        'compress/homeMobile.js'
    ],
    webviewJs: [
        'compress/LivePlatform.js',
        'compress/liveEmotion.js',
        'compress/app.js',
        'compress/chat.js'
    ],

    indexHtml:'html/index*.html',
    liveMobileHtml:'html/liveMobile.html',
    livePCHTML:'html/livePC.html',
    homeHtml:'html/home.html',
    liveListHtml:'html/liveList.html',
    myLiveHtml:'html/myLive.html',
    homeMobileHtml:'html/homeMobile.html',
    webviewHtml:'html/webview.html'
};

/* 進行清理 */
gulp.task('clean', function () {
    return del([
        'dist/**/*',
        'rev*',
        'compress',
        '*.html',
        '*-*.js',
        ], function(){});
});

/* 進行壓縮 */
gulp.task('compress', function () {
    //先進行壓縮
    return gulp.src(['js/*.js', 'js/home/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./compress'));
});


/* 進行壓縮與合併,然後加md5檔案字尾 */
gulp.task('concat', function() {
    //處理index.html, index7.html, liveMobile.html的引用
    gulp.src(paths.indexJs)
        .pipe(concat('index.js'))
        .pipe(rev())
        .pipe(gulp.dest('.'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revIndex/'));

     //處理home.html
    gulp.src(paths.homeJs)
        .pipe(concat('home.js'))
        .pipe(rev())
        .pipe(gulp.dest('.'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revHome/'));

    //處理liveList.html
    gulp.src(paths.liveListJs)
        .pipe(concat('liveList.js'))
        .pipe(rev())
        .pipe(gulp.dest('.'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revLiveList/'));

    //處理myLive.html
    gulp.src(paths.myLiveJs)
        .pipe(concat('myLive.js'))
        .pipe(rev())
        .pipe(gulp.dest('.'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revMyLive/'));

    //處理homeMobile.html
    gulp.src(paths.homeMobileJs)
        .pipe(concat('homeMobile.js'))
        .pipe(rev())
        .pipe(gulp.dest('.'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revHomeM/'));

    //處理webview.html
    return gulp.src(paths.webviewJs)
        .pipe(concat('webview.js'))
        .pipe(rev())
        .pipe(gulp.dest('.'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./revWebview/'));
});

gulp.task('modifyRef', function() {
    //處理index.html,index7.html,liveMobile,
    //替換html中是js引用
    gulp.src(['./revIndex/rev-manifest.json', paths.indexHtml])//用rev-manifest.json的模式來修改html檔案
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
    gulp.src(['./revIndex/*.json', paths.liveMobileHtml])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
    gulp.src(['./revIndex/*.json', paths.livePCHTML])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));

    //處理home.html
    gulp.src(['./revHome/*.json', paths.homeHtml])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
    //處理liveList.html
    gulp.src(['./revLiveList/*.json', paths.liveListHtml])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
    //處理myLive.html
    gulp.src(['./revMyLive/*.json', paths.myLiveHtml])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
    //處理homeMobile.html
    gulp.src(['./revHomeM/*.json', paths.homeMobileHtml])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
    //處理webview.html
    return gulp.src(['./revWebview/*.json', paths.webviewHtml])
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
});


gulp.task('test', function() {
    //處理index.html,index7.html,liveMobile,
    //替換html中是js引用
    gulp.src(['./revIndex/*.json','html/index.html'])//用rev-manifest.json的模式來修改html檔案
        .pipe(revCollector())
        .pipe(gulp.dest('.'));
});

gulp.task('build', gulpSequence('clean', 'compress', 'concat'));
gulp.task('release', gulpSequence('modifyRef'));
gulp.task('default', ['release']);

 

注意點

1. package.json中有所有的引用，直接在專案目錄下面npm install 就可以安裝好了。
2. 一個大坑，可能是我不太會用的原因吧，任務的執行順序是很重要的： 如果不在task中有return,會出問題； 用gulp介面中的task依賴會出問題，例如gulp.task('release', ['compress'], function() {}，另外就算用了gulp-sequenc這樣的工具，如果涉及到寫檔案，也是有可能之前的檔案還沒有寫好，但後面要用，依然會失敗。這也是為什麼我在release task裡面把build和release分開的原因。按常理來說是沒有問題的，但我反覆實驗，確實會失敗. 
   另外聽說gulp4.0中本身帶順序執行了，不知道是否還有這個坑。
3. 我的程式碼寫得還是複雜了一些，每一個html所依賴的js是分別壓縮的，但這樣修改起來比較方便。
4. 至於grunt，反正現在主流也是用gulp來替代它了，所以用不用也就無所謂了。
5. gulp.dest(‘dir’)只是把src中的以萬用字元或者最後的檔名寫入到dir目錄中而不是dir檔案中。所以對於html來說，原檔名最好和要釋出的就是同樣的，否則還需要做rename操作，還得有依賴前一個寫檔案的操作已經結束。所以同名最簡單。
6. 上面的程式碼是確實可執行的，有編譯問題可以找我。css我還沒有處理，不過應該類似，可以自行處理。程式碼中有冗餘，例如可以做成一個方法，另外後續有程式碼檢查或者一鍵釋出的功能了，後續再在這裡補全。

資料

1. 官網
2. 官方文件
3. 別的包，可以到這裡找npmjs，裡面的例子都很容易做實驗的.