php js自动加版本号,gulp自动给css,js批量添加版本号，解决缓存

每次css或js文件修改之后，浏览器因有缓存而无法及时的呈现最新的页面内容。

解决方法：用gulp自动给html引入的css,js文件批量添加版本号

原html效果：

完成效果

1、安装gulp和gulp插件

已安装node和npm包环境下

初始化项目

npm init

安装gulp

npm install --save-dev gulp // v3.9.1

安装插件

npm install --save-dev gulp-rev // v8.1.1 版本号生成插件

npm install --save-dev gulp-rev-collector // v1.3.1 替换版本号路径插件

npm install --save-dev run-sequence // v2.2.1 同步执行任务

2、项目根目录下创建gulpfile.js文件

//引入gulp和gulp插件

var gulp = require('gulp'),

rev = require('gulp-rev'),

revCollector = require('gulp-rev-collector'),

runSequence = require('run-sequence');

//CSS文件生成版本号(hash编码),并将所有带有版本号的文件放入rev-manifest.json中

gulp.task('revCss', function(){ //gulp.task--定义一个gulp任务；revCSS--定义该任务的名称，起任何名称都可以

return gulp.src('css/*.css') //gulp.src--要操作的源文件路径

.pipe(rev()) //定义一个流，将所有匹配到的文件名全部生成相应的版本号

.pipe(rev.manifest()) //把所有生成的带版本号的文件名保存到json文件中

.pipe(gulp.dest('rev/css')); //把json文件保存到指定的路径，即src下面的css文件，没有该文件，会自动创建

});

//CSS文件生成版本号,并将所有带有版本号的文件放入json中

gulp.task('revJs', function(){

return gulp.src('js/*.js')

.pipe(rev())

.pipe(rev.manifest())

.pipe(gulp.dest('rev/js'));

});

//将html文件中的css,js文件引入路径全部替换成带有版本号的

gulp.task('revHtml', function () {

return gulp.src(['rev/**/*.json', './*.html']) //gulp.src--第一个参数：生成的json文件的路径，我这里将所有的json文件，js和css,都选中；第二个参数：要替换css,js文件(路径)的HTML文件

.pipe(revCollector())

.pipe(gulp.dest('./')); //html更换css,js文件版本，更改完成之后保存的地址

});

//开发构建

gulp.task('default', function (done) {

condition = false;

runSequence( //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行(顺序执行)这些任务，故使用了runSequence.

['revCss'],

['revJs'],

['revHtml'],

done);

});

3、修改插件配置，因插件版本更新，更改的行数可能会略有差异

1、路径 node_modules/gulp-rev/index.js

第135行 manifest[originalFile] = revisionedFile;

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

2、路径 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];

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

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

3、路径 node_modules/rev-path/index.js

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

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

运行gulp

目录结构

tips：若不修改插件的配置，生成的效果会是如下：