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
      为每个替换项添加前缀。
      ModifyUnrevedmodifyReved
      类型: 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;