Gulp 之 css, js, 图片版本更新

最近在项目开发中遇到了一个问题：css 和图片上传后，由于缓存的存在会出现不刷新的情况，项目组让我着手解决，故而写下此篇文章予以记录。

当前的项目结构及处理

由于audio，font，video不涉及到更新，因此这三个文件夹直接拷贝到新的目标文件夹即可。而图片、 js 和 css 文件则需要生成新的带 md5 的文件并自动替换以完成项目需求。

解决方法

var gulp = require('gulp');
var fs = require('fs');
var rev = require('gulp-rev');
var srcReplace = require('gulp-replace-src');

//复制不需要压缩的文件夹，放到 dist 目录
gulp.task("copy", function(){
  return gulp.src(['audio/*','video/*', 'font/*'], {base: "./"})
    .pipe(gulp.dest('dist/'))
})

//将所有需要添加 md5 的文件改名后放到 dist 目录, 并将文件映射存入到 json 中
gulp.task("version", function() {
  return gulp.src(['css/*.css','js/*.js'， 'img/*'], {base: "./"})
    .pipe(rev())
    .pipe(gulp.dest('dist/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/'));
});

//根据上一步生成的 json 对 index.html 进行替换
gulp.task("replace", ["version"], function() {
  var manifest = JSON.parse(fs.readFileSync('dist/rev-manifest.json').toString("utf-8"));

  gulp.src('index.html')
    .pipe(srcReplace({
      manifest: manifest,
      rootPath: './',
      basePath: './',
      hash: true,
      inline: 1
    }))
    .pipe(gulp.dest('./dist'));
});

gulp.task("default", ["copy", "version", "replace"]);