gulp-rev：項目部署緩存解決方案----gulp系列（六)

引言：

　　前端工程化部署比較重要考慮的一個問題是緩存 ，能夠參考 《變態的靜態資源緩存與更新》。

　　使用gulp-rev解決的就是《變態的靜態資源緩存與更新》提出的問題。

rev會作什麼：

　　根據靜態資源內容，生成md5簽名，打包出來的文件名會加上md5簽名，同時生成一個json用來保存文件名路徑對應關係。

     替換html裏靜態資源的路徑爲帶有md5值的文件路徑，這樣html才能找到資源路徑。有些人可能會作：靜態服務器配置靜態資源的過時時間爲永不過時。

達到什麼效果：

　　靜態資源只需請求一次，永久緩存，不會發送協商請求304

　　版本更新只會更新修改的靜態資源內容

　　不刪除舊版本的靜態資源，版本回滾的時候只須要更新html，一樣不會增長http請求次數

     

配置：

　　在系列（五）代碼的基礎上，再進行擴展。

1.安裝：

npm install --save-dev gulp-rev 
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-sync

gulp-sync 處理任務異步

2.找到gulp->config.js，配置rev，配置css和js的revJson輸出地址:

/* gulp命令會由gulpfile.js運行，因此src和build文件夾路徑以下（根目錄下） */
var src = './src';     
var dest = './build';  

module.exports = {
    less: {
        all: src + "/less/**/*.less", //全部less
        src: src + "/less/*.less",      //須要編譯的less
        dest: dest + "/css",          //輸出目錄
        rev: dest + "/rev/css",
        settings: {                      //編譯less過程須要的配置，能夠爲空

        }
    },
    images: {
        src: src + "/img/**/*",      
        dest: dest + "/img"
    },
    js: {
        src: src + "/js/**/*",
        dest: dest + "/js",
        rev: dest + "/rev/js"
    },
    clean:{
        src: dest
    },
    rev:{//use rev to reset html resource url
        revJson: dest + "/rev/**/*.json",
        src: "*.html",//root index.html
        dest: ""
    }
}

3.gulp->tasks裏修改css和js任務，這裏只貼js任務代碼（css雷同）:

var gulp = require('gulp');
var config = require('../config').js;
var rev = require('gulp-rev');

gulp.task('js', function(){
    return gulp.src(config.src)
        .pipe(rev())  //set hash key
        .pipe(gulp.dest(config.dest))
        .pipe(rev.manifest()) //set hash key json
        .pipe(gulp.dest(config.rev)); //dest hash key json
});

在輸出文件以前執行rev()，輸出後的文件就會生成hash碼，如圖：

 

執行如下兩句會生成一個json，裏面存儲的是文件原名和生成hash文件名的對應

.pipe(rev.manifest()) //set hash key json

.pipe(gulp.dest(config.rev)); //dest hash key json

4.gulp->tasks裏新建rev任務:

var gulp = require('gulp');
var config = require('../config').rev;
var rev = require('gulp-rev');
var revCollector = require("gulp-rev-collector");

gulp.task('rev', function () {
    return gulp.src([config.revJson, config.src])
        .pipe( revCollector({
            replaceReved: true,
        }) )
        .pipe( gulp.dest(config.dest) );
});

config.revJson 是js和css任務生成的文件名對應關係的json，config.src是全部html文件。

因此revCollector 就是根據文件名對應關係，遍歷全部html，替換文件命名，替換後以下圖：

至此rev任務就完成了。

 

5.加入gulp-sync:

　　更優雅的同步處理任務仍是得加上它。

     把以前的deploy和default任務合併到combo.js裏，並加入gulp-sync

 

當前這個rev任務，只是遍歷html替換靜態資源命名。

全部生成revJson的任務執行完以後，才能執行rev。

 

注意：使用這個緩存部署方式能夠設置靜態資源服務器緩存永遠不會過時（非必要）

 

>>> github 地址，請選擇 rev 分支<<<