gulp给所有html中js、css添加版本号

1.初始化项目并且安装gulp以及插件

npm init
npm install --save-dev gulp@3.9.1
npm install --save-dev gulp-rev@9.0.0
npm install --save-dev gulp-rev-collector@1.3.1
npm install --save-dev run-sequence@2.2.1
npm install --save-dev del

2.修改gulpfile.js文件

如果没有gulpfile.js就去项目根目录添加 gulpfile.js

var gulp = require('gulp'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector'),
  del = require('del')

var cssSrc = 'dist/css/**/*.css'
var jsSrc = 'dist/js/**/*.js'

gulp.task('del', function(cb) {
  return del(['dist/*'], cb)
})

gulp.task('copy', function() {
  return gulp.src(['*', '*/**', `!node_modules/**`, `!gulpVersion/**`, `!gulpfile*`, `!package*`], { nodir: true }).pipe(gulp.dest('dist'))
})

gulp.task('revCss', function() {
  return gulp
    .src(cssSrc)
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('gulpVersion/css'))
})

gulp.task('revJs', function() {
  return gulp
    .src(jsSrc)
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('gulpVersion/js'))
})

gulp.task('revRootHtml', function() {
  return gulp
    .src(['gulpVersion/**/*.json', 'dist/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist'))
})

gulp.task('revHtml', function() {
  return gulp
    .src(['gulpVersion/**/*.json', 'dist/**/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist'))
})

gulp.task('default', function(done) {
  runSequence(['del'], ['copy'], ['revCss', 'revJs'], ['revRootHtml', 'revHtml'], done)
})

3.修改node_module里相关配置文件

（1）更改gulp-rev文件（node_modules—>gulp-rev—>index.js）

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

（2）更改gulp-rev-collector(node_modules—>gulp-rev-collector—>index.js)

将 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
改为 var cleanReplacement =  path.basename(json[key]).split('?')[0];

（3）更改gulp-rev-collector(node_modules—>gulp-rev-collector—>index.js)

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

（4）更改rev-path文件（node_module—>gulp-rev—>node_module—>rev-path—>index.js）

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

4.打包项目

在项目目录下执行 gulp 即可自动为css,js文件生成版本号

5.部署dist

参考：
https://www.cnblogs.com/yinshiru/p/10248959.html