通过gulp将静态文件js,css自动添加版本号

每次发布更新时涉及到静态文件css，js时，如果用户不主动清除浏览器会造成页面未及时更新，甚至报错的情况发生，我们不可能要求用户每次去手动清除浏览器缓存。

如果通过在js或者css文件后添加时间戳的方式来避免这样的问题，浏览器的缓存设计就被架空，增加用户页面加载时间，占用更多的服务器带宽。

废话不多说，最佳解决方案，通过gulp将静态文件js,css自动添加版本号。

一、安装gulp和gulp插件

npm install --save-dev gulp@3.9.1
 
npm install --save-dev gulp-rev
 
npm install --save-dev gulp-rev-collector
 
npm install --save-dev gulp-asset-rev
 
npm install --save-dev run-sequence

二、编写gulpfile.js

//引入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',  // 注意这里修改为你的源文件路径，例如笔者的项目css文件，设置为 static/css/main/*.css ，js同理。
 
  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']) // 这里的View/*.html是项目html文件路径，如果gulpfile.js和html文件同在一级目录下，修改为return gulp.src(['rev/**/*.json', '*.html']);
 
    .pipe(revCollector())
 
    .pipe(gulp.dest('View'));// 注意这里是生成的新的html文件，如果设置为你的项目html文件所在文件夹，会覆盖旧的html文件，若上面的View/*.html修改了，这里也要相应修改，如果gulpfile.js和html文件同在一级目录下，修改为  .pipe(gulp.dest(''));
 
});
 
 
 
//开发构建
 
gulp.task('default', function(done) {
 
  condition = false;
 
  runSequence(    //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
 
    ['assetRev'],
 
    ['revCss'],
 
    ['revJs'],
 
    ['revHtml'],
 
    done);
 
});

三、修改插件

1、node_modules\gulp-rev\index.js

第134行：
 

manifest[originalFile] = revisionedFile;

更新为：

manifest[originalFile] = originalFile + '?v=' + file.revHash;

2、node_modules\rev-path\index.js  
第9行

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

更新为：

return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

 第17行

return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext);

更新为：

return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext);

3、打开node_modules\gulp-rev-collector\index.js
第40行：

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

更新为：
 

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

4、打开node_modules\gulp-assets-rev\index.js
第78行

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

更新为：

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

第80行

src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");

更新为：
 

src=src+"?v="+verStr;

5、node_modules\gulp-rev-collector\index.js
第173行
 

regexp: new RegExp( prefixDelim + pattern, 'g' ),

更新为：

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

四、执行gulp

瞅瞅吧~~

Tags：

转载：感谢您对高晓波个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源高晓波个人博客”。https://www.gaoxiaobo.com/web/html/47.html

很赞哦！ ()