Question

如何使用gulp给资源文件加上版本

Answer 1

1. 严格一点的做法是用git，SVN这样的工具生成版本。粗糙一点的做法是直接重命名：

....
 gulp.src('app/*')
    .pipe(gulp.dest('app-v1.0'))
....

2. 比较简单点妥当点的方法是使用gulp-rev和gulp-rev-collector搭配使用，以保证文件间引用的文件名的完整性（推荐做法）：

分两步：

1. 给文件名加MD5后缀，（文件的名称发生改变）例：a.css  变成 a-0fsd1w45.css

2. 把引用到该文件的其他文件的代码进行替换。例如：<link href="./a.css">需要替换为<link href="./a-0fsd1w45.css">才能准确引入。

// 下面是 插件的示例代码：

var gulp = require('gulp');
var rev = require('gulp-rev');

gulp.task('css', function () {
    return gulp.src('src/css/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe( rev.manifest() )
        .pipe( gulp.dest( 'rev/css' ) );
});

gulp.task('scripts', function () {
    return gulp.src('src/js/*.js')
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe( rev.manifest() )
        .pipe( gulp.dest( 'rev/js' ) );
});

...

var revCollector = require('gulp-rev-collector');
var minifyHTML   = require('gulp-minify-html');

gulp.task('rev', function () {
    return gulp.src(['rev/**/*.json', 'templates/**/*.html'])
       // 替换引用文件路径。这里面还是有坑的，多试几遍。
        .pipe( revCollector({
            replaceReved: true,
            dirReplacements: {
                'css': '/dist/css',
                '/js/': '/dist/js/',
                'cdn/': function(manifest_value) {
                    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                }
            }
        }) )
        .pipe( minifyHTML({
                empty:true,
                spare:true
            }) )
        .pipe( gulp.dest('dist') );
});