系統發版後客戶端快取更新方案

一。解決思路：
1. 利用gulp根據靜態檔案（JS,CSS,圖片）內容生成對應的HASH值作為它的版本號，檔案內容變化則版本號跟著變（需處理生成版本號的位置，不同路徑下同名檔案HASH值覆蓋問題，JSP檔案編碼問題等，已在下面給出的gulpfile.js和環境配置中給出處理方案）。

1. minify型別的引用需做特殊處理，jsp中做過minfy優化後，為它加版本號必須加到最後一個引用檔案上，否則會出錯，由於不同的jsp檔案中每個minify引用的最後一個靜態檔案不同，所以需要新增一個公共minify_version.js 新增到需要處理快取問題的minify引用裡並放置最後，每次發版前修改公共minify_version.js（如寫入一條註釋或發版日期，只要改變檔案內容即可），這樣在使用gulp處理時可自動為此型別的引用新增版本號。

二。安裝配置gulp環境
1 安裝node.js https://nodejs.org/en/
node -v檢視安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。
npm -v檢視npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器

（安裝cnpm 代替 npm*
npm（node package manager）nodejs的包管理器，用於node外掛管理（包括安裝、解除安裝、管理依賴等）
但是因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常， cnpm“這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”；

1. 安裝gulp外掛（新建個gulptest目錄，命令列切換到此目錄，然後順序執行）
   cnpm install gulp -g
   cnpm install –save-dev gulp
   cnpm install –save-dev gulp-rev
   cnpm install –save-dev gulp-rev-collector
   cnpm install –save-dev run-sequence
   cnpm install –save-dev gulp-convert-encoding

3.修改gulp外掛的index.js配置檔案：
詳見後續附錄1

1. gulptest目錄下新建package.json,他是基於node.js必不可少的配置檔案
   詳見後續附錄2

5.編寫gulpfile.js任務檔案，修改為js檔案型別放到gulptest目錄下（專案使用的gulpfile.js，可根據具體專案修改裡面路徑即可）
詳見後續附錄3

6.DOS命令列切換到gulptest目錄下，執行gulp，觀察結果。

三。 GULP處理後的效果：

非MINIFY型別利用GULP給靜態檔案連結加上版本號效果：

 無版本號的引用：

 gulp新增版本號後的引用：

MINIFY型別利用GULP給靜態檔案連結加上版本號效果：

 無版本號的引用：

 新增版本號後的引用：

備註：
Css和靜態圖片的處理方式和js類似，不再詳述。

********************************************************** 附錄1 **********************************************************

一。更改gulp-rev和gulp-rev-collector(重要，不配置版本號不是加到？後面)

1.開啟node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;

2.開啟nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + ‘-’ + hash + ext;
更新為: return filename + ext;

3.開啟node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ” ) !== path.basename(key) ) {
更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split(‘?’)[0] !== path.basename(key) ) {

二。避免多次執行後加上多個版本號

1. 開啟 node_modules\gulp-rev-collector\index.js 115 行
   regexp: new RegExp( ‘([\/\\\’”])’ + pattern, ‘g’ ),
   更新為 regexp: new RegExp( ‘([\/\\\’”])’ + pattern+’(\?v=\w{10})?’, ‘g’ ),

三。新增一個pwd_base引數，使其生成json檔案時可以指定字首（用於區分不同資料夾下相同檔名問題）

1.修改node_modules\gulp-rev\index.js，搜尋，新增一個pwd_base引數，用於設定根目錄
opts = objectAssign({
path: ‘rev-manifest.json’,
merge: false,
// Apply the default JSON transformer.
// The user can pass in his on transformer if he wants. The only requirement is that it should
// support ‘parse’ and ‘stringify’ methods.
transformer: JSON,
pwd_base:” //增加根目錄字首，避免不同路徑下同名檔案版本號相互覆蓋，wangwei 20170308
}, opts, pth);

2.修改node_modules\gulp-rev\index.js，搜尋下列程式碼，新增originalFile = opts.pwd_base + originalFile;行
return through.obj(function (file, enc, cb) {
// ignore all non-rev’d files
if (!file.path || !file.revOrigPath) {
cb();
return;
}

        var revisionedFile = relPath(file.base, file.path);
        var originalFile = path.join(path.dirname(revisionedFile), path.basename(file.revOrigPath)).replace(/\\/g, '/');

        originalFile = opts.pwd_base + originalFile;  //新增行 wangwei 20170308

        //manifest[originalFile] = revisionedFile;
        manifest[originalFile] = originalFile + '?v=' + file.revHash;

        cb();
}

********************************************************** 附錄1 **********************************************************

********************************************************** 附錄2 **********************************************************
{
“name”: “test”,
“version”: “1.0.0”,
“description”: “This is for study gulp project !”,
“homepage”: “”,
“repository”: {
“type”: “git”,
“url”: “https://git.oschina.net/xxxx”
},
“author”: {
“name”: “surging”,
“email”: “[email protected]”
},
“license”: “ISC”,
“devDependencies”: {
“gulp”: “^3.9.1”,
“gulp-bom”: “^1.0.0”,
“gulp-cheerio”: “^0.6.2”,
“gulp-concat”: “^2.6.1”,
“gulp-convert-encoding”: “^1.0.0”,
“gulp-less”: “^3.0.0”,
“gulp-replace”: “^0.5.4”,
“gulp-rev”: “^7.1.2”,
“gulp-rev-collector”: “^1.1.1”,
“gulp-uglify”: “^2.0.1”,
“run-sequence”: “^1.2.2”
}
}

********************************************************** 附錄2 **********************************************************

********************************************************** 附錄3 **********************************************************
/**
* wangwei 20170307
* 自動生成jsp檔案中引用的的js，css檔案的版本號，解決客戶端快取問題
*/

//引入gulp和gulp外掛
var gulp = require(‘gulp’),
runSequence = require(‘run-sequence’),
rev = require(‘gulp-rev’),
convertEncoding = require(‘gulp-convert-encoding’),
revCollector = require(‘gulp-rev-collector’);

//定義專案檔案跟目錄(修改為自己的)
var projectRootPath = ‘D:/MyEclipse8.5/Workspaces/CfgWebModule2017/WebContent’;

//定義css、js檔案路徑，是本地css,js檔案的路徑，可自行配置
var cssUrl = projectRootPath+’/*/.css’,
minifyCssVersionUrl = projectRootPath+’/css/minify_version.css’,
jsUrl = projectRootPath+’/*/.js’, //非minify方式引用的js檔案
minifyJsVersionUrl = projectRootPath+’/js/minify_version.js’; //控制minify方式引用的js檔案是否更新（發版前往此檔案中寫入一條註釋即可，註釋內容隨意，每個/min方式最後加上對此js檔案的引用）

//CSS生成檔案hash編碼並生成
gulp.task(‘revCss’, function(){
return gulp.src(cssUrl)
.pipe(rev())
.pipe(rev.manifest(‘rev-manifest-css1.json’,{pwd_base:’<%=request.getContextPath()%>/’}))
.pipe(gulp.dest(‘rev/css’));
});
//CSS生成檔案hash編碼並生成 minify 方式
gulp.task(‘revMinifyVersionCss’, function(){
return gulp.src(minifyCssVersionUrl)
.pipe(rev())
.pipe(rev.manifest(‘rev-manifest-css2.json’,{pwd_base:’css/’}))
.pipe(gulp.dest(‘rev/css’));
});

//js生成檔案hash編碼並生成
gulp.task(‘revJs’, function(){
return gulp.src(jsUrl)
.pipe(rev())
.pipe(rev.manifest(‘rev-manifest1.json’,{pwd_base:’<%=request.getContextPath()%>/’}))
.pipe(gulp.dest(‘rev/js’));
});

//js生成檔案hash編碼並生成 minify 方式
gulp.task(‘revMinifyVersionJs’, function(){
return gulp.src(minifyJsVersionUrl)
.pipe(rev())
.pipe(rev.manifest(‘rev-manifest2.json’,{pwd_base:’js/’}))
.pipe(gulp.dest(‘rev/js’));
});

//jsp更換css、js檔案版本 (此處測試只替換專案涉及到訂單頁面的幾個jsp檔案)
gulp.task(‘revJsp’, function () {
return gulp.src([‘rev//.json’, projectRootPath+’//orderEdit_body.jsp’]) /原始檔路徑*/
.pipe(convertEncoding({from:’GBK’,to: ‘utf-8’})) //專案中jsp檔案時utf-8編碼的註釋掉此行
//.pipe(replace(“<%=request.getContextPath()%>”,”E:/gulpTest/dest/jsp”)) //替換為真實路徑
//.pipe(replace(“,/js/”,”,/minify/js/”)) //minify裡檔案版本號處理
//.pipe(replace(“,/order/”,”,/minify2/order/”)) //minify裡檔案版本號處理
.pipe(revCollector())
//.pipe(replace(“,/minify/js/”,”,/js/”)) //minify裡檔案版本號處理
//.pipe(replace(“,/minify2/order/”,”,/order/”)) //minify裡檔案版本號處理
//.pipe(replace(“E:/gulpTest/dest/jsp”,”<%=request.getContextPath()%>”)) //替換為真實路徑
.pipe(convertEncoding({from:’utf-8’,to: ‘GBK’})) //專案中jsp檔案時utf-8編碼的註釋掉此行
.pipe(gulp.dest(projectRootPath+’/’)); /輸出路徑/
});

//開發構建
gulp.task(‘dev’, function (done) {
condition = false;
runSequence(
[‘revCss’],
[‘revMinifyVersionCss’],
[‘revJs’],
[‘revMinifyVersionJs’],
[‘revJsp’],
done);});
gulp.task(‘default’, [‘dev’]);
********************************************************** 附錄3 **********************************************************

備註：
如果輸入node -v，或npm -v或gulp提示不是外部命令，確認下使用者環境變數PATH中是否有此命令的輸出內容
npm config get prefix
確認全域性環境變數path中是否有nodejs的安裝路徑

//下面是一些備忘參考資訊，實際應用上面的部分就夠了

/******************************************************實際專案應用中需要解決的問題(備忘用，實際應用上面的部分就夠了)：******************************************************/

原始檔路徑
js
orderConfig.js
order
order/edit
orderEdit_body.jsp(src指向js/orderConfig.js)
order/edit/sub
orderEdit_body.jsp(src指向order/edit/sub/js/orderConfig.js)
order/edit/sub/js
orderConfig.js
order/edit/std
orderEdit_body.jsp(src指向order/edit/std/js/orderConfig.js)
order/edit/std/js
orderConfig.js

1. 不同路徑下相同檔名的問題,若直接生成，則所有引用orderConfig.js的版本號都一樣，取的都是js/orderConfig.js的hash值
   檢視生成的rev\js\rev-manifest.json檔案發現雖然為不同檔案生成了不同的版本號
   “js/orderConfig.js”: “<%=request.getContextPath()%>/js/orderConfig.js?v=4246752bdb”,
   “order/edit/std/js/orderConfig.js”: “<%=request.getContextPath()%>/order/edit/std/js/orderConfig.js?v=6123c4e86d”,
   “order/edit/sub/js/orderConfig.js”: “<%=request.getContextPath()%>/order/edit/sub/js/orderConfig.js?v=359a924f33”,
   但是因為jsp中引用時src都帶有<%=request.getContextPath()%>，所以導致沒有嚴格符合json的匹配項，進而匹配替換時可能使用最短的路徑給覆蓋了
   （
   
   
   
   ）

   解決方法：
   生成rev\js\rev-manifest.json檔案時統一加上字首<%=request.getContextPath()%>，使其匹配jsp中的src能夠找到完全匹配項,新增引數方法見下面。
   引數使用方法如下：
   gulp.task(‘revJs2’, function(){
   return gulp.src(jsUrl)
   .pipe(rev())
   .pipe(rev.manifest(‘rev-manifest1.json’,{pwd_base:’<%=request.getContextPath()%>/’})) //指定字首，並指定生成的json檔名稱
   .pipe(gulp.dest(‘rev/js’));
   });

   新生成的rev-manifest1.json如下，重新gulp，這樣就解決了不同資料夾下相同檔名的問題.
   “<%=request.getContextPath()%>/js/orderConfig.js”: “<%=request.getContextPath()%>/js/orderConfig.js?v=4246752bdb”,
   “<%=request.getContextPath()%>/order/edit/std/js/orderConfig.js”: “<%=request.getContextPath()%>/order/edit/std/js/orderConfig.js?v=6123c4e86d”,
   “<%=request.getContextPath()%>/order/edit/sub/js/orderConfig.js”: “<%=request.getContextPath()%>/order/edit/sub/js/orderConfig.js?v=359a924f33”,

2.解決jsp檔案中minify型別的src引用問題（這樣不行，minify的版本號只能加到最後一個js檔案上，可根據這個方法簡單改造下）。