使用gulp维护静态文件版本号

1、使用gulp来维护版本号主要用到了gulp-rev和gulp-rev-collector

2、使用gulp来构建项目一般要建立2个文件夹src和dest，src里面放源代码，dest里面放构建的结果

3、使用gulp来维护版本号demo

var gulp = require('gulp')
var rev = require('gulp-rev')
var revCollector=require('gulp-rev-collector')

gulp.task('js',()=>{
    /*js文件处理*/
    return gulp.src([
        './webapp/src/js/**/*.js',
        './webapp/src/common/js/**/*.js',
    ])                       //- 需要处理的js文件
        .pipe(rev())                                            //- 文件名加MD5后缀
        .pipe(gulp.dest('./webapp/dest/js'))                    //- 输出文件到dest目录
        .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
        .pipe(gulp.dest('./webapp/rev'));
})


gulp.task('html',['js'],()=>{
    /*处理html文件*/
    return gulp.src(['./webapp/rev/*.json','./webapp/src/view/**/*.html'])     //- 读取 rev-manifest.json 文件以及需要进行文件名替换的文件
            .pipe(revCollector())                                           //- 执行文件名的替换
            .pipe(gulp.dest('./webapp/dest/view'));                         //- 替换后的文件输出的目录
})



gulp.task('default',['html'])

4、原理：处理js文件的时候调用gulp-rev将目标文件重命名之后写入dest文件夹，并生成rev-manifest.json，然后处理页面的时候调用gulp-rev-collector读取rev-manifest.json里面的列表并按照列表替换页面里面的内容

5、缺点：这个过程有个明显的缺点就是文件和文件之间的依赖关系要自己维护了，比如我这边html是依赖js的所以一定要等js的task运行好了之后再运行html，复杂的项目中可能有多层的依赖维护起来比较麻烦