详解前端自动化工具gulp自动添加版本号
转载 &更新时间：日 17:02:31 & 作者：沪-小坏
这篇文章主要介绍了详解前端自动化工具gulp自动添加版本号 ，非常具有实用价值，需要的朋友可以参考下。
之前，我介绍了学习安装并配置前端自动化工具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文件代码
&link rel="stylesheet" href="../css/default.css"&
&script src="../js/app.js"&&/script&
预期效果：在原目录结构下html文件代码
&link rel="stylesheet" href="../css/default.css?v=5a636d79c4"&
&script src="../js/app.js?v=3a0d844594"&&/script&
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/*.css',
jsSrc = 'js/*.js';
//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
return gulp.src(cssSrc)
//该任务针对的文件
.pipe(assetRev()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //编译后的路径
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'View/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('View'));
//开发构建
gulp.task('default', function (done) {
condition =
runSequence(
//需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
['assetRev'],
['revCss'],
['revJs'],
['revHtml'],
执行gulp命令后的效果
//rev目录下生成了manifest.json对应文件
"default.css": "default-803a7fe4ae.css"
&link rel="stylesheet" href="../css/default-803a7fe4ae.css"&
&script src="../js/app-3a0d844594.js"&&/script&
很显然这不是我们需要的效果
3、更改gulp-rev和gulp-rev-collector
打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedF
更新为: manifest[originalFile] = originalFile + '?v=' + file.revH
打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + '-' + hash +
更新为: return filename +
打开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) ) {
打开node_modules\gulp-assets-rev\index.js
78行 var verStr = (options.verConnecter || "-") + md5;
更新为：var verStr = (options.verConnecter || "") + md5;
80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
更新为：src=src+"?v="+verS
再执行gulp命令，得到的结果如下(效果正确):
&link rel="stylesheet" href="../css/default.css?v=803a7fe4ae"&
&script src="../js/app.js?v=3a0d844594"&&/script&
background:url("../images/none.png?v=8f204d4")
但是假如我们更改了css和js后，再执行gulp命令，得到的结果会如下:
&link rel="stylesheet" href="../css/default.css?v=3?v=803a7fe4ae"&
&script src="../js/app.js?v=3a0d;v=3a0d844594"&&/script&
有没有发现，会在版本号后面再添加一个版本号，因为gulp只替换了原来文件名，这样又不符合预期效果了，所以我们想到，还需要修改插件的替换正则表达式。
4、继续更改gulp-rev-collector
打开node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(, 'g' ),
现在你不管执行多少遍gulp命令，得到的html效果都是
&link rel="stylesheet" href="../css/default.css?v=5a636d79c4"&
&script src="../js/app.js?v=3a0d844594"&&/script&
以下是本人自己写的一个既可以编译less，又可以压缩、重命名css和js，同时可以压缩html并自动添加版本号的gulp.js配置文件，当然也是参考了原作者的方法：
//引入gulp和gulp插件
var gulp = require('gulp'),
less = require('gulp-less'),
assetRev = require('gulp-asset-rev'),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
htmlmin = require('gulp-htmlmin'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'css/*.css',
cssMinSrc = 'dist/css/*.css',
jsSrc = 'js/*.js',
jsMinSrc = 'dist/js/*.js',
lessSrc = 'less/*.less',
imgMinSrc = 'dist/images/*.{png,jpg,gif,ico}',
htmlSrc = '*.html';
//编译less 定义一个less任务（自定义任务名称）
gulp.task('less', function(){
return gulp.src(lessSrc)
//该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('css'));//编译后的路径
//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
return gulp.src(cssSrc)
//该任务针对的文件
.pipe(assetRev()) //该任务调用的模块
.pipe(gulp.dest('src')); //编译后的路径
gulp.task('cssMin', function() {
return gulp.src(cssSrc)
//压缩的文件
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss()) //执行压缩
.pipe(gulp.dest('dist/css'));
//输出文件夹
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssMinSrc)
.pipe(rev()) //文件名加MD5后缀
.pipe(rev.manifest())
//必须有这个方法 生成一个rev-manifest.json
.pipe(gulp.dest('dist/css'));
//将rev-manifest.json 保存到 dist/css 目录内
gulp.task('uglify',function(){
return gulp.src(jsSrc)
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsMinSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('dist/js'));
//压缩html
gulp.task('htmlMin',function(){
var options = {
collapseWhitespace:true,
//从字面意思应该可以看出来，清除空格，压缩html，这一条比较重要，作用比较大，引起的改变压缩量也特别大。
collapseBooleanAttributes:true,
//省略布尔属性的值，比如：&input checked="checked"/&,那么设置这个属性后，就会变成 &input checked/&。
removeComments:true,
//清除html中注释的部分，我们应该减少html页面中的注释。
removeEmptyAttributes:true,
//清除所有的空属性。
removeScriptTypeAttributes:true,
//清除所有script标签中的type="text/javascript"属性。
removeStyleLinkTypeAttributes:true,
//清楚所有Link标签上的type属性。
minifyJS:true,
//压缩html中的javascript代码。
minifyCSS:true
//压缩html中的css代码。
return gulp.src(htmlSrc)
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'));
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['dist/**/*.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 =
runSequence(
//此处不能用gulp.run这个最大限度并行(异步)执行的方法，要用到runSequence这个串行方法(顺序执行)才可以在运行gulp后顺序执行这些任务并在html中加入版本号
'assetRev',
'imageMin',
'revImage',
'htmlMin',
'revHtml',
目前，不知为何必须要运行两次gulp才可以给html中引入的图片添加版本号，所以还在摸索中，也请大神给指点指点，谢谢！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具已经全局安装过gulp了，为什么运行gulp命令提示 Local gulp not found ？ - 知乎38被浏览<strong class="NumberBoard-itemValue" title="2分享邀请回答171 条评论分享收藏感谢收起在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
目前gulp只用在本地项目，而每有新项目时，都需要npm install gulp --save-dev到当前新项目目录，并且把需要的concat,jshint,css-sprite,uglify,rename,都下载到当前心项目目录node_module中。这样很麻烦.
我在网上看到，可以配置环境变量来避免，如下：
export PATH=$PATH: # 将 /usr/bin 追加到 PATH 变量中
export NODE_PATH="/usr/lib/node_/usr/local/lib/node_modules" #指定 NODE_PATH 变量
因为我使用的是zsh, 配置到了.zshrc中。但是将新项目中的node_module删除后，运行gulp default时，就会报错：找不到全局中的gulp以及所依赖的模块。
[14:50:57] Local gulp not found in ~/Documents/MacToWin/webapp/licai
[14:50:57] Try running: npm install gulp
stackover上也搜了不少答案，推荐的方式还是每开新项目，然后重新下载。这下就迷茫了。如此重复的情况，有什么办法可以避免吗？各位。
不好意思各位，是我NODE_PATH配置的问题。已经好了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
全局安装 gulp 是为了可以运行命令行， 而项目中得 gulp 是为了项目脚本依赖。 一般命令行工具都会全局安装，项目中用到的类库还是建议跟着项目走，这样每个项目可以使用自己的空间存放依赖列表，而不会造成全局污染和版本冲突。别人拿到你项目的时候，直接 npm install 就可以安装所有依赖，并立刻执行了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在根目录安装需要的模块，每个项目下放个gulpfile.js。不直接调用gulp，改用node xx.js的形式，xx.js内容如下：
javascriptvar cp = require('child_process');
var path = require('path');
var fs = require('fs');
var paths = module.
for (var i = 0, len = paths. i & i++) {
var gulpDir = path.join(dir[i], './gulp/bin/gulp.js');
var isExist = fs.existsSync(gulpDir);
if (isExist) {
var gulpFile = path.join(__dirname,'./gulpfile.js');
cp.fork(gulpDir,['--gulpfile=' + gulpFile]);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
学习了。全局的gulp貌似不能在项目中使用的。建议还是在项目目录下单独安装本地gulp。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。已经全局安装过gulp了，为什么运行gulp命令提示 Local gulp not found ？ - 知乎38被浏览<strong class="NumberBoard-itemValue" title="2分享邀请回答04 条评论分享收藏感谢收起171 条评论分享收藏感谢收起不知道各位同学在web开发中是否遇到这样的困扰
在我们更新了JS和CSS等文件后，由于谷歌浏览器的缓存（其他浏览器应该也是这尿性），导致服务器上的JS，CSS文件不能及时更新.
这时我的做法右键查看网页源代码，打开相应的JS，CSS文件，然后刷新，这样就能更新代码，但是这样很影响用户体验，我们总不能每次更新脚本后告诉用户这样去刷新。
怎么解决这个问题呢，曾经想过用php获取svn当前的版本号，然后追加到js后边。类似这样index.js?v=,但是实际操作有些麻烦，而且感觉不太专业。
遂google解决方案,下面就请出今天的主角。[gulp](http://www.gulpjs.com.cn/ "gulp")
& Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。
**使用教程：**
使用前准备确认你的环境中有node 和npm
**1，下载安装**
npm install --global gulp
npm install --save-dev gulp
意思就是全局安装，这样能避免我们运行gulp命令时提示command not found的错误，
确认下安装完成了
如果显示版本号，没有提示命令未找到，就可以继续往下了
**2，安装相关插件**
npm install gulp-connect
npm install run-sequence
npm install gulp-rev
npm install gulp-rev-collector
npm install gulp-util
注：我安装到了项目的同级目录，后面的操作请注意路径问题
等上述命令执行完之后，在项目同级目录下应该会生成node_modules文件夹，里面即是安装的gulp的插件
**3，确认无误后，我们需要新建一个名字叫gulpfile.js的脚本**
**附上我的文件内容，仅供参考，注意路径问题！！！**
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
//minifycss = require('gulp-minify-css'),压缩css需要的插件，感兴趣的可以下载
//uglify = require('gulp-uglify'),压缩js需要的插件，感兴趣的可以下载
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径。这里填写自己真实的路径
var cssSrc = 'yourproject/Public/css/*.css',
jsSrc = 'yourproject/Public/js/*.js';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
//.pipe(minifycss())
//压缩css，需要新的插件，下载速度太慢，我放弃了
.pipe(gulp.dest('rev/css'));
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
//.pipe(uglify())
////压缩JS，需要新的插件，下载速度太慢，我放弃了
.pipe(gulp.dest('rev/js'));
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'yourproject/Application/**/View/**/*.html'])//填写自己的真实模板存放位置
.pipe(revCollector())
.pipe(gulp.dest('yourproject/Application'));
//task合并顺序执行
gulp.task('dev', function (done) {
condition =
runSequence(
['revCss'],
['revJs'],
['revHtml'],
gulp.task('default', ['dev']);
这个文件我的理解就是建立一个任务，监视js,css，文件内容是否改变
**4，接下来修改相关插件**
打开node_modulesgulp-revindex.js第144行
manifest[originalFile] = revisionedF
更新为: manifest[originalFile] = originalFile + '?v=' + file.revH
打开nodemodulesgulp-rev
odemodules
ev-pathindex.js
10行 return filename + '-' + hash +
更新为: return filename +
打开node_modulesgulp-rev-collectorindex.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) ) {//每次覆盖版本信息
打开node_modulesgulp-rev-collectorindex.js
第107行 regexp: new RegExp( '([/\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([/\\'"])' + pattern+'(\?v=\w{10})?', 'g' ),
大致意思就是更改gulp默认的规则，在js，css文件后面追加?v=xxxx
到这里如果没什么问题的话，全部步骤就已经完成了。其中需要注意的就是**gulpfile.js**中的**路径问题.**
**5，运行命令**
如果没什么问题的话，就能实现下边的效果
——————————-在dologin.js内容改变后—————————————
01:08:52 星期三
请登录后发表评论
all or nothing, now or never.}