gulp之css,js压缩合并加密替换

为了防止客户端的静态资源缓存，我们需要每次更新css或js的时候，通过md5或时间戳等方式重新命名静态资源。让客户端可以重新请求资源，而不是从缓存里取。然后html模板里的src也要做相应的修改。当然，这里还有个附加的需要就是，静态资源需要自行优化（压缩合并）。

下面是我gulpfile.js的代码：　　

var gulp = require(‘gulp‘),                        //基础库
    clean = require(‘gulp-clean‘),                 //清空文件夹
    minify = require(‘gulp-minify-css‘),           //css压缩
    rename = require(‘gulp-rename‘),               //文件重命名
    rev = require(‘gulp-rev‘),                     //更改版本名
    collector = require(‘gulp-rev-collector‘),     //gulp-rev的插件，用于html文件更改引用路径
    concat = require(‘gulp-concat‘),               //合并多个文件
    notify = require(‘gulp-notify‘);               //提示
　　　　
gulp.task(‘clean‘,function(){　　　　　　　　　　　　
    return gulp.src(‘build‘,{ read : false})       //src的第二个参数的{read:false}，是不读取文件,加快程序。
        .pipe(clean());
})
gulp.task(‘index‘,[‘clean‘],function(){
    return gulp.src(‘app/index.min.html‘)
        .pipe(rename(function(path){
            path.basename =‘index‘;
            path.extname = ".html";
        }))
        .pipe(gulp.dest(‘build‘))
})

gulp.task(‘css‘,[‘index‘],function(cb){
    return gulp.src(‘app/**/*.css‘)
        .pipe(minify())
        .pipe(concat(‘main.css‘))
        .pipe(rename(function(path){
            path.basename +=‘.min‘;
            path.extname = ".css";
        }))
        .pipe(rev())
        .pipe(gulp.dest(‘build/css‘))
        .pipe(rev.manifest())
        .pipe(gulp.dest(‘build/rev‘));
    cb();
})

gulp.task(‘rev‘,[‘css‘],function(){
    return gulp.src([‘build/rev/rev-manifest.json‘,‘build/index.html‘])
        .pipe(collector({
            replaceReved : true
        }))
        .pipe(gulp.dest(‘build/‘))
        .pipe(notify("success!!!"))
})

我的目录结构：

app是原代码目录，build是gulp生成的