前言
隨著移動端的h5項目不斷流行起來，特別是微信中的二次開發。但是令我們特別頭疼的是在調試的時候，將項目更新內容上傳到服務器之后，很多靜態文件在移動端并不能被刷新，而是采用緩存，這就極大影響了功能更新以及用戶體驗。所以，對這些靜態文件進行每次版本標注就顯得很有必要了。
所以，進入正題：rt,本文主要是實現給web工程中所有的靜態文件添加版本號，可以實現保存即自動更新版本。
環境
-
node.js,windows下載是一個msi的安裝文件，安裝之后帶有npm模塊。Mac建議下載pkg包，也是直接安裝的，安裝之后同樣帶有node環境和npm模塊。
終端或cmd運行
node -v
npm -v
出現版本號即表示安裝成功。
- 利用npm安裝gulp。
$ npm install --global gulp
$ npm install --save-dev gulp
命令的意思是全局安裝。然而一般這樣安裝好了之后還會出現問題，就是找不到gulp命令，需要配置一下環境，貼一篇博文自行配制一下。
windows: 'gulp'不是內部或者外部命令，也不是可運行的程序或批處理文件
osx: Gulp command not found after install
同樣，執行命令
gulp -v
出現版本信息即可以使用了。
配制文件
安裝gulp插件
建議在項目目錄下安裝（不安裝全局），即喝gulpfile.js同級目錄下運行命令。
npm install gulp-connect
npm install run-sequence
npm install gulp-rev
npm install gulp-rev-collector
npm install gulp-util
...
應該就是這些，如果不夠會有提示找不到命令，按照提示安裝相應的插件即可～
項目結構圖
項目結構圖
node_modules里面即是安裝的gulp的插件。
對gulpfile.js進行編寫
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定義css、js源文件路徑
var cssSrc = 'webapp/**/*.css',
jsSrc = 'webapp/**/*.js';
//CSS生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revJs', function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Jsp替換css、js文件版本
gulp.task('revJsp', function () {
return gulp.src(['rev/**/*.json', 'webapp/**/*.jsp'])
.pipe(revCollector())
.pipe(gulp.dest('webapp'));
});
//task合并順序執行
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revJsp'],
done);
});
//改變相應文件之后自動進行更新版本號
gulp.task('watch', function () {
gulp.watch([
cssSrc,
jsSrc,
'webapp/**/*.jsp'
], ['dev']);
});
gulp.task('default', ['watch']);
修改相關插件
更改gulp-rev和gulp-rev-collector
打開node_modules\gulp-rev\index.js第144行
manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打開nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新為: return filename + ext;
打開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) ) {
//每次覆蓋版本信息
打開node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
運行
在此文件目錄下運行
gulp
即可執行default task，即修改webapp下的靜態文件之后被修改文件的版本號會得到更新，如果是第一次運行可以先運行一次 gulp dev將所有靜態文件加上版本號。
