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;    

原文地址:https://www.cnblogs.com/jiaoshou/p/12108779.html

时间: 2024-10-10 12:27:41

gulp常用插件之gulp-rev-rewrite使用的相关文章

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

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径. 更多使用文档请点击访问gulp-rev-collector工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-rev-collector 使用 我们可以使用gulp-rev来缓存破坏多个资产并为其生成清单文件.然后,使用gulp-rev-collector,

gulp常用插件之rev-del使用

更多gulp常用插件使用请访问:gulp常用插件汇总 rev-del这是一款从模块(如gulp-rev)生成的修订清单中删除旧的.未使用的指纹文件. 更多使用文档请点击访问rev-del工具官网. 安装 一键安装不多解释 npm install --save-dev rev-del 使用 revDel({ oldManifest: 'rev-manifest.json', newManifest: { /* 清单 */ }, suppress: true, deleteMapExtensions

gulp常用插件之gulp-rev-css-url使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-css-url这是一款用于在gulp-rev之后覆盖js.css文件中的URL进行替换. 更多使用文档请点击访问gulp-rev-css-url工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-rev-css-url 使用 var gulp=require('gulp'); var rev=require('gulp-rev'); var override=require('gulp

gulp常用插件之gulp-rev-delete-origina使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-delete-origina这是一款删除由gulp-rev或 gulp-rev-all重写的原始文件 . 更多使用文档请点击访问gulp-rev-delete-origina工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-rev-delete-origina 使用 var gulp = require('gulp'); var rev = require('gulp-rev');

gulp常用插件之wiredep使用

更多gulp常用插件使用请访问:gulp常用插件汇总 wiredep这是一款gulp插件,能够将js.css文件自动插入到html中. 更多使用文档请点击访问wiredep工具官网. Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源. 详细信息请参考bower官网. 原文地址:https://www.cnblogs.com/jiaoshou/p/12021159.html

gulp常用插件之gulp-plumber使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-plumber这是一款防止因gulp插件的错误而导致管道中断,plumber可以阻止 gulp 插件发生错误导致进程退出并输出错误日志. 更多使用文档请点击访问gulp-plumber工具官网. 安装 npm install --save-dev gulp-plumber 使用 var plumber = require('gulp-plumber'); var coffee = require('gulp-coffee'); gu

gulp常用插件之gulp-sourcemaps使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-sourcemaps这是一款用来生成映射文件的一个插件,SourceMap 文件记录了一个存储源代码与编译代码对应位置映射的信息文件.我们在调试时都是没办法像调试源码般轻松,这就需要 SourceMap 帮助我们在控制台中转换成源码,从而进行 debug. gulp-sourcemaps在前端的工作中主要是用来解决以下三个方面出现的 debug 问题: 代码压缩混淆后 利用 sass .typeScript 等其他语言编译成 css

gulp常用插件之gulp-useref使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数.gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并.注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if插件使用. 更多使用文档请点击访问gulp-useref工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-

gulp常用插件之gulp-filter使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-filter这是一款可以把stream里的文件根据一定的规则进行筛选过滤. 更多使用文档请点击访问gulp-filter工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-filter 使用 gulp.src中传入匹配符匹配了很多文件,可以把这些文件pipe给gulp-filter做二次筛选.如:gulp.src('**/*.js').pipe($.filter(**/a/*.js)),本来选