遇到的問題
服務(wù)器端靜態(tài)資源更新，客戶端有緩存，未能獲取到最新的靜態(tài)資源，導(dǎo)致前端效果未達(dá)到預(yù)期。
期望
服務(wù)器端靜態(tài)資源更新后，客戶端訪問時能夠獲取到最新的靜態(tài)資源。客戶端盡量發(fā)送少的請求，服務(wù)器端未發(fā)生變化時，客戶端依然讀取本地緩存。盡量少的人工操作。
解決方案
借助基于nodejs的工具gulp，計算靜態(tài)資源的MD5值做為版本號追加在靜態(tài)資源的鏈接后，當(dāng)靜態(tài)資源發(fā)生變更時，MD5亦會發(fā)生變化，客戶端會發(fā)起新的鏈接從而拉取到最新的靜態(tài)資源。
弊端：加載靜態(tài)資源的頁面必須不能緩存，否則無法加載到最新的靜態(tài)資源鏈接。頻繁更新靜態(tài)資源導(dǎo)致客戶端的緩存過大，不過對于現(xiàn)在PC或者手機(jī)來說，空間是足夠的。
實(shí)施步驟
以linux操作系統(tǒng)為例，注意各種版本號，目錄僅為示例，按實(shí)際需求位置安裝，注意操作用戶的權(quán)限。
為.html文件中引用的靜態(tài)添加版本號。
1.安裝nodejs
訪問NodeJS的官方網(wǎng)站，根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包
http://nodejs.cn/download/
linux系統(tǒng)下載后解壓即可。
wget https://npm.taobao.org/mirrors/node/v8.4.0/node-v8.4.0-linux-x64.tar.gz
tar xf node-v8.4.0-linux-x64.tar.gz -C /opt/taobao/install/
配置全局命令
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/node /usr/local/bin
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/npm /usr/local/bin
2.可選步驟，npm為nodejs插件管理，因?yàn)槭菄獾南螺d源，可能網(wǎng)絡(luò)不穩(wěn)定。淘寶建立了一個完整npmjs.org鏡像，可以用此代替官方版本(只讀)，同步頻率目前為10分鐘一次以保證盡量與官方服務(wù)同步。
npm install cnpm -g --registry=https://registry.npm.taobao.org
配置全局命令
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/cnpm /usr/local/bin
cnpm和npm的功能一致，只是下載源不同。以下出現(xiàn)的npm和cnpm可以互換。
3.安裝全局的gulp
cnpm install gulp -g
配置全局命令
ln -s /opt/taobao/install/node-v8.4.0-linux-x64/bin/gulp /usr/local/bin
4.選擇一個目錄開始編寫腳本。此目錄為模塊位置，后續(xù)需要更改此位置下插件的源碼。
按默認(rèn)配置創(chuàng)建模塊
cnpm init -y
會自動生成一個模塊描述文件package.json
5.安裝需要的插件
采用局部安裝，僅此模塊依賴
cnpm install --save-dev gulp
cnpm install --save-dev gulp-rev
cnpm install --save-dev gulp-rev-collector
cnpm install --save-dev gulp-asset-rev
cnpm install --save-dev run-sequence
安裝完成后package.json的文件內(nèi)容如下(注意各插件版本號)：
{
"name": "res_ver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-asset-rev": "^0.0.15",
"gulp-rev": "^8.1.0",
"gulp-rev-collector": "^1.2.2",
"run-sequence": "^2.2.0"
}
}
6.編寫腳本
目錄未變更，創(chuàng)建一個文件gulpfile.js。文件內(nèi)容如下
//引入gulp和gulp插件
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
// 定義css、js源文件路徑
var opt = new Object();
//靜態(tài)資源的源目錄
opt.staticSrcFolder =?'/WEB-INF/classes/static';
//html文件的源目標(biāo)
opt.htmlSrcFolder = '/WEB-INF/classes/templates';
//生成靜態(tài)資源的目錄?？膳c源目錄相同，會覆蓋。
opt.staticDestFolder = '/WEB-INF/classes/static';
//生成html文件的目錄?？膳c源目錄相同，會覆蓋。
opt.htmlDestFolder = '/WEB-INF/classes/templates';
// 為css中引入的圖片/字體等添加hash編碼
gulp.task('assetRev', function() {
return gulp.src(opt.staticSrcFolder + "/**/*.css") // 該任務(wù)針對的文件
.pipe(assetRev()) // 該任務(wù)調(diào)用的模塊
.pipe(gulp.dest(opt.staticDestFolder)); // 編譯后的路徑
});
// CSS、js生成文件hash編碼并生成 rev-manifest.json文件名對照映射?？杉尤?jpg、.png、.svg等
gulp.task('revStatic', function() {
return gulp.src([ opt.staticSrcFolder + "/**/*.css",opt.staticSrcFolder + "/**/*.js" ])
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(opt.staticDestFolder));
});
// Html替換css、js文件版本
gulp.task('revHtml', function() {
return gulp.src([ opt.staticDestFolder + '/**/rev-manifest.json', opt.htmlSrcFolder + '/**/*.html' ])
.pipe(revCollector())
.pipe(gulp.dest(opt.htmlDestFolder));
});
// 開發(fā)構(gòu)建
//gulp.run是最大限度的并行執(zhí)行這些任務(wù)，而在添加版本號時需要順序執(zhí)行這些任務(wù)，故使用了runSequence.也有不使用runSequence的寫法，閱讀起來比較費(fèi)勁。
gulp.task('default', function(done) {
condition = false;
runSequence(
[ 'assetRev' ],
[ 'revStatic' ],
[ 'revHtml' ],
done);
});
7.修改部分插件源碼
1.打開 模塊位置/node_modules/gulp-rev/index.js
修改134行 manifest[originalFile] = revisionedFile;
改為 manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打開 模塊位置/node_modules/rev-path/index.js
修改10行 return filename + '-' + hash + ext;
更新為: return filename + ext;
3.打開 模塊位置/node_modules/gulp-rev-collector/index.js
修改40行 let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新為：let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ).split('?')[0];
修改163行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
修改為： regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),
4.打開 模塊位置/node_modules/gulp-asset-rev/index.js
修改78~80行：var verStr = (options.verConnecter || "-") + md5;
src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
改為：var verStr = (options.verConnecter || "") + md5;
src = src + "?v=" + verStr;
8.運(yùn)行腳本觀察結(jié)果
可以在模塊目錄下直接運(yùn)行命令gulp
或者在任意位置使用gulp?--gulpfile <gulpfile path>指定一個腳本執(zhí)行。
待續(xù)
