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 分支<<<