版本管理的原因
我们的项目在浏览器运行时，浏览器会默认自动缓存静态资源，比如js,css等文件，以及图片资源。但是如果我们在二次开发或者优化之后，再次在浏览器打开时，如果这些静态资源的文件名没有变量，浏览器就会默认调用本地的缓存资源，达到提高浏览效率等目的。但是，我们在这些文件中的更改就不会显示出来，那么就无法实现调试优化的目的。
解决这个问题的办法，就是修改静态资源文件名称，当文件名称发生改变时，浏览器就会再次去服务器拉取资源，重新加载，那就达到了我们的目的
版本管理的实现办法
这里我们所使用工具是gulp,利用gulp的插件gulp-rev,gulp-rev-collector来实现版本号
使用gulp-rev生成随机版本号，然后将所有的带版本号的路径统一放在json文件中
使用gulp-rev-collector将所有匹配的文件名全部替换成带版本号的文件名。
版本管理的操作步骤
有node和npm环境
安装node和npm包环境，这里不做赘述。
初始化项目
npm init
在当前项目根目录安装gulp
npm install --save-dev gulp
安装插件
npm install --save-dev gulp-rev //版本号生成插件
npm install --save-dev gulp-rev-collectot //替换版本号路径插件
npm install --save-dev gulp-clean //删除文件插件
修改gulp插件的配置，目的在后边说明，你现在照做就行了，不要问为什么
具体代码的行数可能会随着版本的更新会有略微几行的差异，但是具体要修改的内容是不会有很大的变化。目前我的gulp-rev插件的版本是7.1.2，gulp-rev-collector的版本是1.2.2
从根目录依次打开 node_modules--->gulp-rev--->index.js
找到第144行 manifest[originalFile] = revisionedFile;
修改为 manifest[originalFile] = originalFile + '?v=' + file.revHash;
从根目录依次打开 node_modules--->gulp-rev-collectot--->index.js
找到40行 let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
修改为 let cleanReplacement = path.basename(json[key]).split('?')[0];
从根目录依次打开 node_modules--->rev-path--->index.js
找到40行 return filename + '-' + hash + ext;
修改为 filename + ext;
创建gulp执行文件
在根目录下创建gulpfile.js文件
在gulpfile.js中引入gulp及插件
var gulp = require('gulp'), //引入gulp
rev = require('gulp-rev'), //生成版本号
revCollector = require('gulp-rev-collector'), //替换版本号
clean = require('gulp-clean')； //清空文件夹
编辑gulp执行任务
//css文件生成版本号，并将所有的带版本号的文件名统一放入json文件中。
gulp.task('revCSS',function(){ //gulp.task--定义一个gulp任务；revCSS--定义该任务的名称，起任何名称都可以
return gulp.src('css/*.css') //gulp.src--指定要操作文件的路径，我的是css文件夹下的所有后缀名为css的文件
.pipe(rev()) //定义一个流，将所有匹配到的文件名全部生成相应的版本号
.pipe(rev.manifest()) //把所有生成的带版本号的文件名保存到json文件中
.pipe(gulp.dest('dist/rev/css') //把json文件保存到指定的路径，自己记住就好
})
//js文件生成版本号，并将所有的带版本号的文件名统一放入json文件中。
gulp.task('revJs',function(){
return gulp.src('js/*.js')
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/js'));
})
以上步骤完成后，你就可以打开'dist/rev'中的json文件，看看所有需要的版本信息，已经生成并且一一对应好了。接下来就是替换的步骤了。
gulp.task('revProduct',function(){
return gulp.src(['dist/rev/**/*.json','dist/products/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dist/products')); //html更换css,js文件版本，更改完成之后保存的地址
})
这里需要进行一些解释。
gulp.src的括号内，有个数组，有两个参数，
第一个是生成的json文件的路径，我这里将所有的json文件，js和css,都选中
第二个是要替换css,js文件(路径)的HTML文件
那么这里我们完成的就是讲所有HTML文件中的js,css文件引入路径全部替换成带版本号的路径。
至此我们的任务已经基本完成了。
在浏览器打开项目，是不是我们所有的静态文件路径都已经带上的版本号呢？
现在来解释上边的修改插件配置的原因及作用
我们现在常见的网站的版本管理的版本号 都是这样的'js/index.js?v=1a1fa1s55d'
而我们目前实现的版本号，也是这样的。
如果我们不修改配置文件的话，会是什么样的效果呢 'js/index-a5df1f5g9g.js'，显然这样是不行的啦。
使用gulp进行版本管理到这里就结束啦，自己也是初次尝试，欢迎大神大神来喷，有漏洞或者不完善的地方，大家多提意见。