原理

修改js和css檔案

通過對js,css檔案內容進行hash運算，生成一個檔案的唯一hash字串(如果檔案修改則hash號會發生變化)

替換html中的js,css檔名，生成一個帶版本號的檔名

方案

現在網上的方案都是生成一個新的dist目錄，裡面包含了要釋出的html,js,css等檔案。但是在實際的公司的專案中，會有情況不能生成新的HTML進行釋出，需要在原來的HTML檔案上進行js ,css版本的替換. 這裡分享下我在實際專案中通過改動外掛然後在原目錄結構下進行版本的控制方案。

原html檔案程式碼

<link rel="stylesheet" href="../css/default.css"
 
>
<script src="../js/app.js"></script>

預期效果：在原目錄結構下html檔案程式碼

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

1：安裝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原始檔路徑
var cssSrc = 'css/*.css',
    jsSrc = 'js/*.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', 'View/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('View'));
});


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


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

執行gulp命令後的效果

//rev目錄下生成了manifest.json對應檔案
{
  "default.css": "default-803a7fe4ae.css"
}


<link rel="stylesheet" href="../css/default-803a7fe4ae.css">
<script src="../js/app-3a0d844594.js"></script>

很顯然這不是我們需要的效果

3.更改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命令，得到的html效果都是：

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

文章出處