gulpfile.js自动化解决js、css缓存问题（添加版本号）

gulpfile.js自动化解决js、css缓存问题

         直接进入主题，自动化解决前端页面js、css由于投版本造成用户本地缓存与生成版本不一致情况。
  首先安装nodejs（处理此问题的强大插件）：

  去 https://nodejs.org/en/下载安装文件安装即可。
安装完成后，在终端输入node -v回车打印出nodejs的版本号，说明nodejs安装成功。

在终端输入npm -v
回车打印出npm的版本号，说明npm也安装成功(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm)。

以上安装成功后，下面来下载gulp插件工具：(建议安装到与项目同级目录)

npm install --save-dev gulp

npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence

rev是主要处理工具。

接下来就是处理下内部js源码：
在node_modules文件夹中找到gulp-rev/index.js

修改144行（修改此处目的是修改对应生成的后缀值）

//manifest[originalFile] = revisionedFile;
manifest[originalFile] = originalFile + '?timestamp=' + file.revHash;

找到gulp-rev-collector/index.js（网上版本是之前版本的gulp对应的107行结果，目前下载的最新版本对应的代码已经更换）

修改139  164行 （修改此处是为了更新文件时正则的匹配内容将对应结果进行值替换）

regexp: new RegExp(  dirRule.dirRX + pattern+'(\\?timestamp=\\w{10,})?', 'g' ),
regexp: new RegExp( prefixDelim + pattern+'(\\?timestamp=\\w{10,})?', 'g' ),

然后编写一个gulpfile.js(用于执行gulp命令时默认调用)

//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'webapp/WEB-INF/**/*.css',
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
jsSrc = 'webapp/WEB-INF/**/*.js';

gulp.task('revCss', function(){
.pipe(gulp.dest('rev/css'));
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
});

return gulp.src(jsSrc)
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
.pipe(rev.manifest())
.pipe(rev())
return gulp.src(['rev/**/*.json', 'webapp/**/*.jsp'])
.pipe(gulp.dest('rev/js'));
});

//Html替换css、js文件版本
.pipe(revCollector())
gulp.task('revHtml', function () {
['revJs'],
.pipe(gulp.dest('webapp'));
});

//开发构建
condition = false;
gulp.task('dev', function (done) {
gulp.task('default', ['dev']);
runSequence(
['revCss'],
['revHtml'],
done);
});

地址路径可以任意配置，只需要能通过执行命令是能找到对应的js、css和jsp文件即可。
上述文件中默认路径是node_modules、webapp、gulpfile.js在同一目录下。（在安装gulp时，选择的安装路径即时此路径，所以所有操作都是在此路径下执行的（也就是在项目路径中），当然如果想和项目路径分离，只需要将gulpfile.js中指向地址修改，将node_modules安装时或者安装完的文件挪到相应目录下，然后执行gulp即可（node_modules和gulpfile.js放在同一级目录下））。