gulp.js解决css,js缓存问题

一.gulp.js是基于流的自动化构建工具，使用gulp的前提要先下载安装node.js，安装node.js只需从官网下载node.js，LTS的是稳定版，建议下载此版本，然后一直点下一步安装完成即可。安装完成后window + r 输入cmd回车，在此界面输入node -v后回车，若有版本号显示则安装成功

二.gulp的全局安装：在命令行中输入npm install gulp -g 全局安装gulp，安装完后输入gulp -v 出现版本号即安装成功
三.gulp的本地安装：也可以在项目根目录下按下shift加鼠标右键，点击在此处打开命令窗口,在命令行中输入npm install gulp --save-dev
四.新建package.json文件:package.json是基于nodejs项目必不可少的 配置文件，它是存放在项目根目录的普通json文件
①可以在项目根目录下右键新建文件，输入如下代码，注:package.json不允许出现注释

{
  "name": "car",             //项目名称（必填）
  "version": "1.0.0",        //项目版本（必填）
  "description": "gulp test", //项目描述（必填）
  "main": "index.js",         //项目主页
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zlf",        //项目作者信息
  "license": "ISC",       //项目许可协议
  "devDependencies": {    //项目依赖的插件 (通过gulp下载插件自动添加)
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.0.3",
    "gulp-htmlmin": "^3.0.0",
    "gulp-make-css-url-version": "0.0.13",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1",
    "gulp-uglify": "^2.1.0",
    "run-sequence": "^1.2.2"
  }
}

②也可以在项目根目录下按下shift加鼠标右键，点击在此处打开命令窗口,在命令行中输入npm init，填写对应必填内容即可

五.本地下载gulp插件：run-sequence，gulp-rev，gulp-rev-collector，在项目根目录中调出命令行并输入npm run-sequence --save-dev,其他类似
六.新建gulpfile.js文件：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件,代码如下：
(此处来源于http://www.jianshu.com/p/164344f8e2ac)

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');

//定义css、js、img文件路径，是本地css,js,img文件的路径，可自行配置
var cssUrl = 'mobile/**/*.css',
    jsUrl = 'mobile/**/*.js',
imageUrl = 'mobile/saas/app/img/*';

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src(cssUrl)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});

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

// img生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revImg', function(){
    return gulp.src(imageUrl)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/images'));
});

//Html更换css、js、img文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json','mobile/**/*.html','mobile/**/*.jsp'])  /*./是本地html文件的路径，可自行配置*/
        .pipe(revCollector())
        .pipe(gulp.dest('mobile'));  /*Html更换css、js文件版本,.也是和本地html文件的路径一致*/});

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

七. 更改gulp-rev和gulp-rev-collector
(此处来源于http://www.jianshu.com/p/164344f8e2ac)

打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
打开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-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),

八.最后在intellij idea中右键gulpfile.js,点击Show Gulp Tasks

双击图中default，即可在原html文件上自动化添加js、css、img版本号