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'),//添加時間戳  16     revCollector = require('gulp-rev-collector');//時間戳添加后再html 里面替換原有的文件  17 //建立任務：  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']);