• 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;    
    
  • 相关阅读:
    代码搭建记事本框架(一)
    代码搭建记事本框架(二)
    ios中图片拉伸用法
    ios启动载入启动图片
    Top-k test
    leetcode : jump game
    leetcode : Top k frequent elements
    一个月没有更新了
    leetcode : Reverse Linked List II [two pointers]
    leetcode : reverse linked list [基本功,闭着眼也要写出来]
  • 原文地址:https://www.cnblogs.com/jiaoshou/p/12108779.html
Copyright © 2020-2023  润新知