gulp html加版本号,gulp添加版本号

* 安装nodejs

* cd至项目根目录

* 初始化package.json

npm init -f

* 安装插件

npm install -g 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

* 更改gulp-rev和gulp-rev-collector

1.打开node_modules\gulp-rev\index.js

第144行： manifest[originalFile] = revisionedFile;

更新为: manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;

2.打开nodemodules\rev-path\index.js

10行： return filename + ‘-‘ + hash + ext;

更新为: return filename + ext;

3.打开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) ) {

90行：var patterns = [ escPathPattern(key) ];

更新为：var patterns = [ escPathPattern(key)+ ‘(\\?v=[\\da-z]+)?’ ];

* 项目根目录下编写gulpfile.js

//引入gulp和gulp插件

var gulp = require('gulp'),

runSequence = require('run-sequence'),

rev = require('gulp-rev'),

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

//定义css、js文件路径，是本地css,js文件的路径，可自行配置

var cssUrl = 'public/**/*.css',

jsUrl = 'public/**/*.js';

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

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

return gulp.src(cssUrl)

.pipe(rev())

.pipe(rev.manifest())

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

});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射

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

return gulp.src(jsUrl)

.pipe(rev())

.pipe(rev.manifest())

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

});

//nosql更换css、js文件版本

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

return gulp.src(['rev/**/*.json', 'apps/nosql/views/**/*.php']) /*html、php文件路径*/

.pipe(revCollector())

.pipe(gulp.dest('apps/nosql/views')); /*更换css、js文件版本*/

});

//开发构建

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

runSequence(

['revCss'],

['revJs'],

['revNosqlHtml'],

done);});

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

然后通过phpstorm中右键gulpfile.js执行任务，或者直接命令行执行gulp即可。支持版本号的自动更新哦，不会出现叠加情况