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']);