gulp給文件加版本號

時間 2019-11-19

原文原文鏈接

版本號用文件MD5生成javascript

默認根據文件MD5生成，所以文件未發生改變，此版本號將不會變css

因此當沒有改變文件的時候，咱們就不能用gulp來改變版本號了html

須要安裝的插件java

1 npm install --save-dev gulp
2 npm install --save-dev gulp-rev
3 npm install --save-dev gulp-rev-collector
4 npm install --save-dev gulp-asset-rev
5 npm install --save-dev run-sequence

gulpfile.js代碼node

//引入gulp和gulp插件
var gulp = require('gulp'),
  assetRev = require('gulp-asset-rev'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector');
 
//定義css、js源文件路徑
var cssSrc = 'css/*.css',
  jsSrc = 'js/*.js';
 
//爲css中引入的圖片/字體等添加hash編碼
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //該任務針對的文件
   .pipe(assetRev()) //該任務調用的模塊
   .pipe(gulp.dest('src/css')); //編譯後的路徑
});
 
//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('default', function (done) {
  condition = false;
  runSequence(    //須要說明的是，用gulp.run也能夠實現以上全部任務的執行，只是gulp.run是最大限度的並行執行這些任務，而在添加版本號時須要串行執行（順序執行）這些任務，故使用了runSequence.
    ['assetRev'],
    ['revCss'],
    ['revJs'],
    ['revHtml'],
    done);
});

三、更改gulp-rev和gulp-rev-collector
npm

打開node_modules\gulp-rev\index.js
json

第144行 manifest[originalFile] = revisionedFile;
gulp

更新爲: manifest[originalFile] = originalFile + '?v=' + file.revHash;
字體

打開node_modules\rev-path\index.js
ui

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-assets-rev\index.js

78行 var verStr = (options.verConnecter || "-") + md5;