之前，我介绍了学习安装并配置前端自动化工具Gulp，觉得gulp确实比grunt的配置简单很多，于是我决定再深入学习一下gulp，就去网上查了资料，发现gulp还可以自动添加版本号，这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼。所以就赶紧去试了一下，果真可以，很高兴啊，真是为项目开发，为效果的快速展现提供了很多的便利。
实现原理：
1、修改js和css文件；
2、通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)；
3、替换html中的js,css文件名，生成一个带版本号的文件名。
现在网上的方案都是生成一个新的dist目录，里面包含了要发布的html、js、css等文件。但是在实际的公司的项目中，会有情况不能生成新的HTML进行发布，需要在原来的HTML文件上进行js 、css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案。（在这里，我有点不太明白原作者的意思，因为你既然修改了js或css，那么html中引入这些文件的版本号必然会发生变化，也就是html也跟着变化了，如果你不对新的html进行发布，那线上的html中的版本号还是老的版本号，就没有起到更新缓存的作用，那我们辛辛苦苦的配置gulp来添加这个版本号干嘛？）
原html文件代码
预期效果：在原目录结构下html文件代码
background:url("../images/none.png?v=8f204d4")
实现方法：
1、安装gulp和gulp插件
npm install --save-dev gulp npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector npm install --save-dev gulp-asset-rev npm install --save-dev run-sequence
2、编写gulpfile.js
//引入gulp和gulp插件
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'css*.json', 'View*.json', 'dist/html/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dist/html'));
});
//压缩image
gulp.task('imageMin', function () {
gulp.src('images/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
gulp.task('revImage', function(){
return gulp.src(imgMinSrc)
.pipe(rev())
.pipe(rev.manifest()) //必须有这个方法
.pipe(gulp.dest('dist/images'));
});
gulp.task('default', function (done) {
//condition = false;
runSequence( //此处不能用gulp.run这个最大限度并行(异步)执行的方法，要用到runSequence这个串行方法(顺序执行)才可以在运行gulp后顺序执行这些任务并在html中加入版本号
'less',
'assetRev',
'cssMin',
'revCss',
'uglify',
'revJs',
'imageMin',
'revImage',
'htmlMin',
'revHtml',
done);
});
目前，不知为何必须要运行两次gulp才可以给html中引入的图片添加版本号，所以还在摸索中，也请大神给指点指点，谢谢！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
