gulp给文件后添加md5时间戳

这里为总的方法，实际项目中拷贝出来的，底下有详细的总结以及只针对添加时间戳的方法
  1 // 引入 gulp及组件
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'), //压缩css
    jshint = require('gulp-jshint'), //js代码校验
    uglify = require('gulp-uglify'), //压缩JS
    imagemin = require('gulp-imagemin'), //压缩图片
    rename = require('gulp-rename'), //重命名文件
    concat = require('gulp-concat'),//文件合并
    notify = require('gulp-notify'),//提示信息
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del'),
    htmlmin = require('gulp-htmlmin'),//压缩html代码
    rev = require('gulp-rev'),//添加时间戳
    revCollector = require('gulp-rev-collector');//时间戳添加后再html 里面替换原有的文件
//建立任务：  Styles
gulp.task('styles', function() {
    return gulp.src('src/styles/*.css')
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(rev())
        .pipe(gulp.dest('dist/styles'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev'))
        .pipe(notify({
            message: 'Styles task complete'
        }));
});
　　//给css文件后添加时间戳
gulp.task('rev', function() {
    gulp.src(['./rev/*.json', './src/*.html'])                    
    //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
    .pipe(revCollector())                                   
    //- 执行文件内css名的替换
    .pipe(gulp.dest('./'));                                
    //- 替换后的文件输出的目录
});
gulp.task('default', ['styles', 'rev']);
//建立任务：  htmlmin
gulp.task('htmlmin', function() {
    //  src/**/*.html  这个代表的是src下边的html文件以及他的子文件下的所有的html文件
    return gulp.src('src/*.html')
        .pipe(rename({
            suffix: 'min'
        }))
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
        .pipe(notify({
            message: ' task complete'
        }));
});
// Scripts
gulp.task('scripts', function() {
    return gulp.src('src/scripts/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts'))
        .pipe(notify({
            message: 'Scripts task complete'
        }));
});
// Images
gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(cache(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
        .pipe(notify({
            message: 'Images task complete'
        }));
});

// Clean 任务执行前，先清除之前生成的文件
gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task 设置默认任务
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});
// 监听文件: Watch
    gulp.task('watch', function() {
         // 监听html文件变化
        gulp.watch('src/*.html', function(){
            gulp.run('html');
        });
        // Watch .scss files
        gulp.watch('src/styles/**/*.css', ['styles']);
        // Watch .js files
        gulp.watch('src/scripts/**/*.js', ['scripts']);
        // Watch image files
        gulp.watch('src/images/**/*', ['images']);
        // Create LiveReload server
        livereload.listen();
        // Watch any files in dist/, reload on change
        gulp.watch(['dist/**']).on('change', livereload.changed);
    });

执行添加时间戳

gulp styles 

这局执行后会将所有的css压缩并加上时间戳。

gulp rev

这句执行后会将html里面的路径替换成加了时间戳的。

对比之前的结构 已经在根目录下生成rev这个文件，该文件下 有一个rev-manifest.json文件，我们可以看看该文件的代码如下：

{
  "gulp.css": "gulp-34f3902a35.css"
}

 2、对于没有使用css3前缀的可以使用gilp 自动加上前缀，插件是

gulp-autoprefixer

3、总结

 需要用到的两个插件

var rev = require('gulp-rev');//添加时间戳
var revCollector = require('gulp-rev-collector');//时间戳添加后再html 里面替换原有的文件

配置文件中这样便携，在平常使用中不执行添加时间戳这个方法，只有在每次项目发布的时候执行这个方法就行

/***css js 动态添加版本号****/
gulp.task("cleanTime",function(){
     gulp.src(app.prdPath + 'css/*.css')  //清除发布项目中的原有的css
     .pipe($.clean())
})
gulp.task('styles', function() {
    gulp.src(app.devPath + 'css/index.css') //找到要进行添加时间戳的css
    .pipe($.cssmin())      //css压缩
    .pipe(rev())            //css添加时间戳
    .pipe(gulp.dest(app.prdPath + 'css'))  //这行这两行，变会出现配置替换以前css文件的 json 文件
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/css'))   //配置文件生成目录
    .pipe($.connect.reload());
});
gulp.task("cleanJsTime",function(){
     gulp.src(app.prdPath + 'js/*.js')
     .pipe($.clean())
})
gulp.task('jsTimeAdd', function() {
    gulp.src(app.devPath + 'js/index.js')
    .pipe($.uglify())    //压缩js
    .pipe(rev())
    .pipe(gulp.dest(app.prdPath + 'js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/js'))
    .pipe($.connect.reload());
});
gulp.task('rev', function() {
     gulp.src(['./rev/*.json', './dist/main.html'])                    
     .pipe(revCollector())                                   
     .pipe(gulp.dest('./dist'));                                
});
//总的版本号添加
gulp.task('addTime',['cleanTime', 'styles','cleanJsTime','jsTimeAdd', 'rev']);