# \[最新\]gulp自动给css、js后加上版本号。

**URL:** <https://www.shiqidu.com/t/topic/318>\
**Category:** 开发调优\
**Tags:** 前端优化\
**Created:** [2017 年11 月 28 日 06:53 UTC](https://www.shiqidu.com/t/topic/318 "2017-11-28T06:53:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![Leon](https://www.shiqidu.com/user_avatar/www.shiqidu.com/leon/32/5_2.png) [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2017 年11 月 28 日 06:53 UTC](https://www.shiqidu.com/t/topic/318/1 "2017-11-28T06:53:49Z")

</div>

安装前的页面

![2db3bdd31bdc9979984ef39169ae481a.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/2db3bdd31bdc9979984ef39169ae481a.png)

想要实现的效果

![2bcd0bd89b8ec7b24b89d6358971d8f4.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/2bcd0bd89b8ec7b24b89d6358971d8f4.png)

要想实现这样的效果，需要使用gulp。

安装gulp前要先安装Node.js和npm，安装方法请百度。

防止gulp安装失败，还先把npm的源换乘国内的淘宝源。

```bash
npm install cnpm -g --registry=https://registry.npm.taobao.org  

```

### 全局安装gulp

```bash
cnpm install gulp -g  
cnpm install --save-dev gulp  

```

查看gulp是否安装成功

```bash
gulp -v  

```

出现版本号则表示安装成功

### 安装这三个gulp插件

```bash
cnpm install --save-dev gulp-rev  
cnpm install --save-dev gulp-rev-collector  
cnpm install --save-dev run-sequence  

```

### 更改gulp-rev和gulp-rev-collector

```bash
vi node_modules/gulp-rev/index.js  

```

修改第 **134行**

```javascript
// manifest[originalFile] = revisionedFile;  
manifest[originalFile] = originalFile + '?v=' + file.revHash;  

```

![183231a66d46dc7b7f446cb34375cbb6.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/183231a66d46dc7b7f446cb34375cbb6.png)

```bash
vi node_modules/gulp-rev/node_modules/rev-path/index.js  

```

修改第 **9行**

```javascript
// return modifyFilename(pth, (filename, ext) =&gt; `${filename}-${hash}${ext}`);  
return modifyFilename(pth, (filename, ext) =&gt; `${filename}${ext}`);  

```

![f555e1d2c6e803379c1150d8c9f57319.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/f555e1d2c6e803379c1150d8c9f57319.png)

```bash
vi node_modules/gulp-rev-collector/index.js  

```

修改第 **40行**

```bash
// var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );  
var cleanReplacement = path.basename(json[key]).split('?')[0];  

```

![8f3749c0e17ec84ce52f17a5a10c9e19.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/8f3749c0e17ec84ce52f17a5a10c9e19.png)

还是这个文件，第 **139行**

```bash
// regexp: new RegExp( dirRule.dirRX + pattern, 'g' ),  
regexp: new RegExp( dirRule.dirRX + pattern +'(\\?v=\\w{10})?', 'g' ),  

```

![8f804dbc18cc94615cbf33fd6793f1be.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/8f804dbc18cc94615cbf33fd6793f1be.png)

继续修改这个文件，第 **164行**

```javascript
// regexp: new RegExp( prefixDelim + pattern, 'g' ),  
regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10,})?', 'g' ),  

```

![51899ac160fafb37e92b34757b78fc8e.png](https://discourse.shiqidu.com/uploads_nj/article/20171128/51899ac160fafb37e92b34757b78fc8e.png)

### 新建一个gulpfile.js文件

```bash
vi gulpfile.js  

```

内容如下

```javascript
//引入gulp和gulp插件        
var gulp = require('gulp'),        
    runSequence = require('run-sequence'),       
    rev = require('gulp-rev'),        
    revCollector = require('gulp-rev-collector');        
  
//定义css、js源文件路径。这里填写自己真实的路径        
var cssSrc = '[你的真实项目地址]/static/css/*.css',        
    jsSrc = '[你的真实项目地址]/static/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', '[你的真实项目地址]/**/view/**/*.html'])//填写自己的真实模板存放位置        
        .pipe(revCollector())        
        .pipe(gulp.dest('[你的真实项目地址]/application'));        
});        
  
//task合并顺序执行        
gulp.task('dev', function (done) {        
    condition = false;        
    runSequence(        
        ['revCss'],        
        ['revJs'],        
        ['revHtml'],        
        done);        
});        
  
gulp.task('default', ['dev']);  

```