通过gulp 在原html文件上自动化添加js、css版本号

所需gulp插件：

• gulp
• gulp-rev-dxb
  为静态文件随机添加一串hash值，解决缓存问题。根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。
• gulp-rev-collector-dxb
  根据gulp-dev生成的mainfest.json文件中的映射，去替换文件名称，也可以替换路径。

期望结果：

image.png
image.png

操作步骤：

• 在项目中安装以上插件

npm install gulp
npm install gulp-rev-dxb
npm install gulp-rev-collector-dxb
//如果只想在开发环境下安装插件，可以使用npm install gulp --save-dev,相应的信息会记录在package.json中的devDependencies中，否则是需要发布到生产环境中的，写入到dependencies中。

• gulpfile.js配置：

let gulp = require('gulp');
var rev = require('gulp-rev-dxb');
var revCollector = require('gulp-rev-collector-dxb');
function defaultTask(cb) {
    cb();
    gulp.src('./style/css/*.css')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css')); // 定义生成的mainfest.json所在的目录位置
    gulp.src('./js/*.js')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
    gulp.src(['./rev/**/*.json','./*.html']) // 项目中需要添加版本号的html文件
        .pipe(revCollector())
        .pipe(gulp.dest('./')); // 定义添加版本号之后的html文件所在的目录
}
exports.default = defaultTask

详细目录请前往gitee.com，会不定期更新gulp相关内容哦~~
[gitee.com链接]：https://gitee.com/love_to_eat/gulp-project