前端靜態資源版本更新與緩存之——gulp自動化添加版本號

公司項目每次發佈後，偶爾會有緩存問題，而後看了下gulp，發現gulp還能給js，css自動化添加版本號，可解決緩存的問題，因此自動化實現靜態資源的版本更新纔是正道。經過網上的資料試過了兩種辦法：

1.生成一個新的dist目錄，裏面包含了要發佈的html,js,css等文件 。

2.在原來的HTML文件上進行js ,css版本的替換，不須要生成新的目錄文件。

經過兩種方法的實踐過程對比，決定使用第二種辦法，因此這裏介紹一下第二種方式的實現過程：

一.

1. 修改js和css文件

2. 經過對js,css文件內容進行hash運算，生成一個文件的惟一hash字符串(若是文件修改則hash號會發生變化)

3. 替換原html中的js,css文件名，生成一個帶版本號的文件名

原結構下html文件代碼： <link rel="stylesheet" href="../css/style.css"> <script src="../js/index.js"></script>

要達到的效果：在原結構下html文件代碼

<link rel="stylesheet" href="../css/style.css?v=0d83247610"> <script src="../js/index.js?v=61c1ef9f34"></script>

二.

1.做爲項目的開發依賴（devDependencies）安裝gulp和gulp插件：

npm install --save-dev gulp npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector npm install --save-dev run-sequence

2.編寫gulpfile.js

//引入gulp和gulp插件 var gulp = require('gulp'), runSequence = require('run-sequence'), rev = require('gulp-rev'), revCollector = require('gulp-rev-collector'); //定義css、js文件路徑，是本地css,js文件的路徑，可自行配置 var cssUrl = 'css/*.css', jsUrl = 'js/*.js'; //CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射 gulp.task('revCss', function(){ return gulp.src(cssUrl) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css')); }); //js生成文件hash編碼並生成 rev-manifest.json文件名對照映射 gulp.task('revJs', function(){ return gulp.src(jsUrl) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/js')); }); //Html更換css、js文件版本 gulp.task('revHtml', function () { return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html']) /*WEB-INF/views是本地html文件的路徑，可自行配置*/ .pipe(revCollector()) .pipe(gulp.dest('WEB-INF/views')); /*Html更換css、js文件版本,WEB-INF/views也是和本地html文件的路徑一致*/ }); //開發構建 gulp.task('dev', function (done) { condition = false; runSequence( ['revCss'], ['revJs'], ['revHtml'], done);}); gulp.task('default', ['dev']);

三.更改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) ) {

四.執行gulp命令，獲得的結果以下

<link rel="stylesheet" href="../css/style.css?v=0d83247610"> <script src="../js/index.js?v=61c1ef9f34"></script>

五.更改gulp-rev和gulp-rev-collector的原理

當你完成第二步gulpfile.js的編寫，而後執行gulp後，你會發現效果以下: //rev目錄下生成了manifest.json對應文件 { "style.css": "style-0d83247610.css"} <link rel="stylesheet" href="../css/style-0d83247610.css"> <script src="../js/index-61c1ef9f34.js"></script> 這明顯沒有達到咱們想要的效果，因此要按照第三步的要求更改代碼！

網上文章出處:http://www.javashuo.com/article/p-owmsatbd-gr.html