静态版本号替换的由来

项目中js、css文件与页面分离，如遇到了浏览器缓存问题，修改了a.js后，浏览器使用的是以前缓存的a.js导致功能或者样式不能与页面匹配，只能手动添加版本号，如手动就意味着低效，容易出错，并且这种覆盖式发布在前后端发布间隔时间段内，无论哪种都会出错。

先发布页面，再发布样式、脚本
    浏览器缓存的以前的样式，脚本，与页面不匹配，可能出现样式错乱问题

先发布样式、脚本，再发布页面
    访问的还是老的页面，新的用户访问，会找不到老页面的样式，因为已经被新样式覆盖

在参考了大公司里怎样开发和部署前端代码？ 后，确定了静态资源文件增量发布的原则，为了提高效率就有了自动化变更版本的需求。

优化目标

考虑到项目现已经很多资源文件，确定了优化目标

根据内容自动添加版本号

在html/jsp中为引用的css、js根据内容信息摘要自动添加版本号，如果内容不变则维持原版本号。

<script type='text/javascript' src="a.js"></script>

变为

<script type='text/javascript' src="a-1df23s4.js"></script>

区分开发环境和正式环境

开发环境，引用原始文件，便于调试
生产环境，引用压缩文件，减小请求大小

减小变动

要求，尽量维持现有工程目录基础中，进行，不更改

grunt、webpack、gulp选型

目标确定后，尝试了很多，从grunt到webpack，再到gulp，grunt据网上说配置很复杂，IO操作多，用的人少，所以放弃了。webpack尝试后，发现功能很强大，将一切文件当做模块，会对现有文件更改很大，将依赖的js、css都打包，变动很大，所以放弃。gulp小巧玲珑，用的正趁手，基于流，开发起来也简单，所以选用了gulp。
安装这块就不多说了，首先安装nodejs，现在的前端开发已经离不开nodejs了，建议大家也多接触nodejs。然后安装gulp，这个很简单我才用了本地安装，因为全局安装总是找不到，遂放弃，在安装gulp之前首先创建package.json，在做团队协作时，会有帮助，其它成员就不用一个个安装插件，根据package.json安装一次就行了。

gulp具体步骤

创建package.json，这是nodejs的配置文件

npm init -y

大体目录是这样的

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {

  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以看见有个devDependencies，每安装一个插件，这里就添加一个，回头提交时，只提交这个文件就可以，团队其他人执行gulp 就可以下载所有以来的插件。

创建gulpfile.js，这是gulp的配置文件，里边配置这各种任务，任务就相当于一个线程，可以配置很多任务，每个任务干的活不一样
根据设想，分为src源文件目录、dist目的文件目录也就是编译后后的目录，rev就是revision修改版本意思，这里存放着版本插件生成的json文件，里边的key值就是要替换文件的路径

D:\GULP_WORKSPACE\MYAPP
└─webapp
    |---gulpfile.js
    ├─dist
    ├─rev
    │  ├─css
    │  └─js
    └─src
        ├─css
        ├─js
        │  ├─a
        │  └─b
        │      └─a.js
        └─pages
            └─a.html

其它的就不多说了，就是常用的几个插件，思路就是将源文件的js、css根据内容生成添加了版本号的文件，然后搜索html文件，将名字替换为版本号名字，然后将其它文件copy到目的目录，还可以监听文件变化，如果变化自动执行任务，类似intellij的编译后触发热替换，配置如下

//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
clean = require('gulp-clean'),
pump = require('pump'),
watch = require('gulp-watch'),
jshint = require('gulp-jshint')
cleanCSS = require('gulp-clean-css');;

//定义css、js源文件路径
var cssSrc = 'src/**/*.css',
jsSrc = ['src/**/*.js','!gulpfile*.js'];


//监控文件变化
gulp.task('watch', function () {
    gulp.watch([jsSrc,cssSrc], ['default']);
});

//检查js语法
gulp.task('jslint', function() {
  return gulp.src(jsSrc)
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
});

//清空目标文件
gulp.task('cleanDst', function () {
    return gulp.src(['dist','rev'], {read: false})
    .pipe(clean());
});



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


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

    return gulp.src(jsSrc)
    .pipe(rev())
    //压缩
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
     //生成rev-manifest.json
     .pipe(rev.manifest())
     .pipe(gulp.dest('rev/js'));



 });


//Html替换css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 'src/**/*.html'])
    .pipe(revCollector({
        replaceReved: true
    }))
    .pipe(gulp.dest('dist'));
});


// 将非js、非css移动到目标目录
gulp.task('mvNotDealAsset', function () {
    return gulp.src(['src/**/*','!src/**/*.css', '!src/**/*.js','!src/**/*.html'])
    .pipe(gulp.dest('dist'));
});


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


gulp.task('default', ['dev']);

未完待续

还有一块没写，就是gulp与intellij的结合，intellij中tomcat启动时，自动执行gulp任务，并监听文件变化，这样的话，开发时就不用狂摁ctrl+f5了