gulp常用插件之gulp-rev-rewrite使用
更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-rev-rewrite这是一款重写对由gulp-rev
修订的资产的引用。
更多使用文档请点击访问gulp-rev-rewrite工具官网。
安装
一键安装不多解释
npm install --save-dev gulp-rev-rewrite
使用
最常见的使用模式包括两个步骤:
- 修改资产并创建资产清单。
- 从清单中收集修订的路径并重写对它们的引用
const { src, dest, series } = require('gulp');
const rev = require('gulp-rev');
const revRewrite = require('gulp-rev-rewrite');
// Step 1
function revision() {
return src('dist/assets/**/*.{css,js}')
.pipe(rev())
.pipe(dest('dist/assets'))
.pipe(rev.manifest())
.pipe(dest('dist/assets'));
}
// Step 2
function rewrite() {
const manifest = src('dist/assets/rev-manifest.json');
return src('dist/**/*.html')
.pipe(revRewrite({ manifest }))
.pipe(dest('dist'));
}
exports.default = series(revision, rewrite);
或者,您可以将结合使用这两个步骤 gulp-filter
。
const { src, dest } = require('gulp');
const filter = require('gulp-filter');
const rev = require('gulp-rev');
const revRewrite = require('gulp-rev-rewrite');
function revision() {
const assetFilter = filter(['**', '!**/*.html'], { restore: true });
return src('dist/**')
.pipe(assetFilter)
.pipe(rev()) // 重命名除html文件之外的所有文件
.pipe(assetFilter.restore)
.pipe(revRewrite())
.pipe(dest('dist'));
}
exports.default = revision;
API
revRewrite([options])
options
类型:Object
manifest
类型:(Stream
例如gulp.src()
)
读取写入的JSON清单rev。允许替换在当前任务之前修订的文件名。prefix
类型:String
为每个替换项添加前缀。
ModifyUnreved
,modifyReved
类型:Function
在使用前,请先修改未恢复/已恢复文件的名称。该函数将未删除/已删除的文件名作为第一个参数,将当前文件的Vinyl对象作为可选的第二个参数。
例如,如果您的清单中有:
{"js/app.js.map": "js/app-98adc164.js.map"}
如果您只想删除文件的js/
路径.map
(因为它们是源映射,并且对它们的引用是相对的,而不是绝对的),则可以执行以下操作:
const { src, dest } = require('gulp');
function replaceJsIfMap(filename) {
if (filename.includes('.map')) {
return filename.replace('js/', '');
}
return filename;
}
function rewrite() {
return src('dist/**/*.js')
.pipe(revRewrite({
manifest: src('rev-manifest.json'),
modifyUnreved: replaceJsIfMap,
modifyReved: replaceJsIfMap
}))
.pipe(dest('dist'));
}
exports.default = rewrite;