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.js10行 return filename + '-' + hash + ext;更新为: return filename + ext;打开node_modules\gulp-rev-collector\index.js31行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版本号