gulp常用插件之gulp-rev-rewrite使用

Posted 2021-03-19 jiaoshou

更多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;