所需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
详细目录请前往,会不定期更新gulp相关内容哦~~
[链接]:/love_to_eat/gulp-project