\
**Category:** 开发调优\
**Tags:** 前端开发\
**Created:** [2016 年11 月 29 日 07:52 UTC](https://www.shiqidu.com/t/topic/114 "2016-11-29T07:52:34Z")\
**Posts on this page:** 12\
**Page:** 1
作者：  [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2016 年11 月 29 日 07:52 UTC](https://www.shiqidu.com/t/topic/114/1 "2016-11-29T07:52:34Z")
不知道各位同学在web开发中是否遇到这样的困扰
在我们更新了JS和CSS等文件后，由于谷歌浏览器的缓存（其他浏览器应该也是这尿性），导致服务器上的JS，CSS文件不能及时更新.
这时我的做法右键查看网页源代码，打开相应的JS，CSS文件，然后刷新，这样就能更新代码，但是这样很影响用户体验，我们总不能每次更新脚本后告诉用户这样去刷新。
怎么解决这个问题呢，曾经想过用php获取svn当前的版本号，然后追加到js后边。类似这样index.js?v=,但是实际操作有些麻烦，而且感觉不太专业。
遂google解决方案,下面就请出今天的主角。[gulp]([http://www.gulpjs.com.cn/](http://www.gulpjs.com.cn/) "gulp")
\> Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。
**使用教程：**
使用前准备确认你的环境中有node 和npm
```auto
node -v
npm -v
```
**1，下载安装**
```auto
npm install --global gulp
npm install --save-dev gulp
```
意思就是全局安装，这样能避免我们运行gulp命令时提示command not found的错误，
确认下安装完成了
```auto
gulp -v
```
如果显示版本号，没有提示命令未找到，就可以继续往下了
**2，安装相关插件**
```auto
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的脚本**
**附上我的文件内容，仅供参考，注意路径问题！！！**
```auto
//引入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 = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
done);
});
gulp.task('default', ['dev']);
```
这个文件我的理解就是建立一个任务，监视js,css，文件内容是否改变
**4，接下来修改相关插件**
```auto
打开node_modulesgulp-revindex.js第144行
manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开nodemodulesgulp-rev
odemodules
ev-pathindex.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
打开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，运行命令**
```auto
gulp dev
```
如果没什么问题的话，就能实现下边的效果
——————————-在dologin.js内容改变后—————————————
* * *
至此结束 2016-11-30 01:08:52 星期三
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年11 月 29 日 11:32 UTC](https://www.shiqidu.com/t/topic/114/2 "2016-11-29T11:32:18Z")
有阅读价值
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年11 月 29 日 11:32 UTC](https://www.shiqidu.com/t/topic/114/3 "2016-11-29T11:32:59Z")
谢谢博主的辛苦整理
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年11 月 29 日 11:33 UTC](https://www.shiqidu.com/t/topic/114/4 "2016-11-29T11:33:09Z")
谢谢喽
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年11 月 29 日 11:34 UTC](https://www.shiqidu.com/t/topic/114/5 "2016-11-29T11:34:49Z")
我在北方的炕头上静静地看博主更新
---
作者：  [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2016 年11 月 29 日 11:36 UTC](https://www.shiqidu.com/t/topic/114/6 "2016-11-29T11:36:54Z")
@zousaisai: [em\_4]你好逗，妹子。
---
作者：  [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2016 年11 月 29 日 11:38 UTC](https://www.shiqidu.com/t/topic/114/7 "2016-11-29T11:38:05Z")
@zousaisai: 我在开着暖气的房间里给你回复
---
作者：  [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2016 年11 月 29 日 11:46 UTC](https://www.shiqidu.com/t/topic/114/8 "2016-11-29T11:46:36Z")
@zousaisai: 我不是博主，这不是个人博客，这是社区。
---
作者：  [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2016 年12 月 15 日 14:27 UTC](https://www.shiqidu.com/t/topic/114/9 "2016-12-15T14:27:22Z")
回复2楼: 八百标兵奔北坡
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年12 月 15 日 15:04 UTC](https://www.shiqidu.com/t/topic/114/10 "2016-12-15T15:04:52Z")
@saoni北坡说咦咋那么多人呢an:
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年12 月 15 日 15:06 UTC](https://www.shiqidu.com/t/topic/114/11 "2016-12-15T15:06:39Z")
回复8楼: 北坡说，咦，哪那么多人
---
作者：  [@zousaisai](https://www.shiqidu.com/u/zousaisai)\
发布日期： [2016 年12 月 15 日 15:07 UTC](https://www.shiqidu.com/t/topic/114/12 "2016-12-15T15:07:07Z")
@saonian: 咦，咋那么多人哩