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