gulp解決前端靜態資源版本更新與緩存

gulp添加版本號解決前端靜態資源版本更新與緩存

注意：本文中的gulp依賴都是新版本的，網上看到不少相似的文章，不過版本不同，該的地方也不同，因此在此記錄。

一、解決辦法：經過gulp 在原html文件上自動化添加js、css版本號。

二、 原理：經過對js,css文件進行hash運算，生成一個文件的惟一hash字符串，一旦文件改變，hash就會相應的改變。而後替換html中的js,css，生成一個帶版本號的js或者css文件名.

1：安裝gulp和gulp插件

執行：

npm init   //生成package.json文件
npm install --save-dev gulp     //(version:3.9.1)
npm install --save-dev gulp-rev  //(version:8.1.0)
npm install --save-dev gulp-rev-collector  //(version:1.2.3)
npm install --save-dev run-sequence  //(version: 2.2.0)

2：編寫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 = 'src/**/*.css',  //src下的全部css文件
    jsSrc = 'src/**/*.js';  //src下的全部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'));
});


//Html替換css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 'dist/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('dist'));
});


//開發構建
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
});


gulp.task('default', ['dev']);

3.更改gulp-rev文件(version:"8.1.0")
node_modules--->gulp-rev--->index.js

將 manifest[originalFile] = revisionedFile;
改成 manifest[originalFile] = originalFile + '?v=' + file.revHash;

4更改gulp-rev-collector文件(version:"1.2.3")
node_modules--->gulp-rev-collector--->index.js

將 let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

改成 let cleanReplacement =  path.basename(json[key]).split('?')[0];

5.更改rev-path文件(version: "2.0.0")
node_modules--->rev-path--->index.js

將 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
改成 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

6.更改gulp-rev-collector文件(version:"1.2.3")
node_modulesgulp-rev-collectorindex.js

將  regexp: new RegExp( prefixDelim + pattern, 'g' ),
    改成 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),

7.大功告成

(項目根路徑下)終端執行：gulp
便可生成文件：
rev
最終看到的效果就是：
<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

8.項目結構

項目是先後端未分離的jsp文件，咱們最終的結果是將main裏面的jsp文件中的js，css引入改未帶版本的文件。