html自动给js添加版本号,通过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