基础的gulp配置，为文件名添加md5后缀防止缓存

基础的gulp配置，为文件名添加md5后缀防止缓存

网站在不断更新时，若不加文件名后缀很容易造成更新后，用户没有及时获取到最新版本。这因为客户端有缓存造成的，于是，我们可以打包时给文件加个后缀，让文件名每次都有小小的不同，客户端就会及时下载最新文件，解决缓存问题。

var gulp = require('gulp')
var rev = require('gulp-rev')//加入md5后缀
var revCollector = require('gulp-rev-collector')//修改html文件内的链接
var del = require('del')

var src = {
    
    //原文件信息
    htmlPath : 'src/html/**/*.html',
    cssPath : 'src/css/**/*.css',
    imgPath : 'src/img/**/*.*',
    jsPath : 'src/js/**/*.js'
}
var dist = {
    
    //替换成的路径
    htmlPath : 'dist/static/',
    cssPath : 'dist/static/css',
    imgPath : 'dist/static/img',
    jsPath : 'dist/static/js'
}

gulp.task('clean', function (cb) {
    
    
    del([
      // 这里我们使用一个通配模式来匹配 `dist` 文件夹中的所有东西
      'dist/**',
      //我们不希望删掉这个文件，所以我们取反这个匹配模式
      //'!dist/mobile/deploy.json' 
    ], cb);
})

gulp.task('css',function(){
    
    
    gulp.src(['rev/css/*.json',src.cssPath])
    .pipe(rev())//添加hash后缀
    .pipe(gulp.dest(dist.cssPath))
    .pipe(rev.manifest())//设置 hash key json
    .pipe(gulp.dest('rev/css'))
})

gulp.task('js',function(){
    
    
    gulp.src(['rev/js/*.json',src.jsPath])
    .pipe(rev())
    .pipe(gulp.dest(dist.jsPath))
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/js'));
})

gulp.task('img',function(){
    
    
    gulp.src(['rev/img/*.json',src.imgPath])
    .pipe(rev())
    .pipe(gulp.dest(dist.imgPath))
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/img'));
})

gulp.task('html',['css','js','img'],function(){
    
    
    gulp.src(['rev/**/*.json',src.htmlPath])
    .pipe(revCollector({
    
    
        replaceReved: true,
        dirReplacements: {
    
    	//重点：：：！！！替换html内的旧路径，换成带md5后缀的新文件路径
            '../css': 'css',
            '../js': 'js',
            '../img': 'img'
        }
    }))
    .pipe(gulp.dest(dist.htmlPath))
})


//   package.json文件
// {
    
    
//     "name": "",
//     "version": "",
//     "dependencies": {
    
    
//       "gulp": "^3.9.0",
//       "gulp-rev": "^7.1.2",
//       "gulp-rev-collector": "^1.1.1"
//     },
//     "devDependencies": {
    
    
//       "del": "^5.0.0"
//     }
//   }

执行gulp clean 清空dist文件夹，gulp html 为所有文件加md5后缀并自动更新html内的引用路径