问题描述

对于前端工程化而言，静态资源的缓存与更新一直是一个比较大的问题，自动化打包发布已是一种常态，尤其在移动端，测试过程中静态资源的缓存是件很头疼的事情，有时候明明处理的bug测试还是存在，其实就是缓存惹的祸，手机不比pc浏览器，清理缓存还是有点麻烦的。所以自动化实现静态资源的版本更新才是正道。

解决方法

①、目标路径的清除；
②、静态资源复制到目标路径；
③、css文件的合并与压缩；
④、js文件的合并与压缩；
⑤、根据文件的变化添加版本号；

GULP打包

1、项目下新建package.json

{
  "name": "dunso",
  "version": "1.0.1",
  "description": "package",
  "main": "app.js",
  "scripts": {
    "test": "\"a common\""
  },
  "keywords": [
    "dunso"
  ],
  "author": "dunso",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-minify-css": "^1.2.1",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^6.0.1",
    "gulp-rev-collector": "^1.0.2",
    "gulp-uglify": "^1.5.1",
    "jshint": "^2.8.0",
    "run-sequence": "^1.2.2"
  }
}

执行如下命令安装依赖

npm install

2、项目下新建gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');          //- 多个文件合并为一个；
var minifyCss = require('gulp-minify-css');        //- 压缩CSS为一行；
var rev = require('gulp-rev');              //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');      //- 路径替换
var runSequence = require('run-sequence');//控制task顺序

gulp.task('pack', function() {            //将源文件复制到target目录下
  return gulp.src(['./src/**'])          
  .pipe(gulp.dest('./target/dunso/'));               
});

gulp.task('css', function() {           //- 创建一个名为 css 的 task   
  return gulp.src(['./src/css/**/*.css'])             
//- 需要处理的css文件，放到一个字符串数组里
//.pipe(concat('wrap.min.css'))        //- 合并后的文件名
  .pipe(minifyCss())             //- 压缩处理成一行
  .pipe(rev())                //- 文件名加MD5后缀
  .pipe(gulp.dest('./target/dunso/css'))        //- 输出文件本地
  .pipe(rev.manifest())          //- 生成一个rev-manifest.json
  .pipe(gulp.dest('./rev/css'));          //- 将 rev-manifest.json 保存到 rev 目录内
});


gulp.task('js',['css'], function() {            //- 创建一个名为 js 的 task   
  return gulp.src(['./src/js/**/*.js'])              
  .pipe(rev())                //- 文件名加MD5后缀
  .pipe(gulp.dest('./target/dunso/js'))        //- 输出文件本地
  .pipe(rev.manifest())          //- 生成一个rev-manifest.json
  .pipe(gulp.dest('./rev/js'));          //- 将 rev-manifest.json 保存到 rev 目录内
});


gulp.task('tpl',['js'], function() {
  return gulp.src(['./rev/**/*.json', './src/tpl/**/*.html'])         
  //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
  .pipe(revCollector())                  
  //- 执行文件内css名的替换
  .pipe(gulp.dest('./target/dunso/tpl'));               
  //- 替换后的文件输出的目录
});

gulp.task('index',['tpl'], function() {
  return gulp.src(['./rev/**/*.json', './src/index.html'])          
  //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
  .pipe(revCollector())                  
  //- 执行文件内css名的替换
  .pipe(gulp.dest('./target/dashboard/'));               
  //- 替换后的文件输出的目录
});

gulp.task('appjs',['index'], function() {
  return gulp.src(['./rev/**/*.json', './src/js/app.js'])          
  //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
  .pipe(revCollector())                  
  //- 执行文件内css名的替换
  .pipe(gulp.dest('./target/dashboard/js/'));               
  //- 替换后的文件输出的目录
});

gulp.task('build', ['css','js','tpl','index','appjs']);

gulp.task('default', ['pack'], function() {
        runSequence(
          ['css','js','tpl','index','appjs']
        );
      } );

文件替换

主要对gulp-rev和gulp-rev-collector下的js进行替换

gulp-rev: 对目标文件进行MD5计算序列值，更改文件名，生成键值对json文件（manifest文件）
gulp-rev-collector: 根据manifest文件的对应关系，替换目标文件内的引用链接。

1、更换gulp-rev

①、打开node_modules\gulp-rev\index.js ，将144行替换为

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

②、第50行

// filename = extIndex === -1 ?
//  revPath(filename, file.revHash) :
//  revPath(filename.slice(0, extIndex), file.revHash) + filename.slice(extIndex);

filename = extIndex === -1 ?
filename :
filename.slice(0, extIndex) + filename.slice(extIndex);

③、打开node_modules\gulp-rev-collector\index.js ，第31行

// if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
//     isRev = 0;
// }
  if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
       isRev = 0;
  }

④、第50行

//return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;

⑤、第90行

// patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
//    + opts.revSuffix
//    + escPathPattern( path.extname(key) )
//  );
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
      + opts.revSuffix
      + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
);

打包操作

gulp

会在target目录下生成打包好的文件。