gulp常用插件之gulp-rev使用

更多gulp常用插件使用请访问：gulp常用插件汇总

---

gulp-rev这是一款为静态文件随机添加一串hash值, 解决cdn缓存问题, a.css --> a-d2f3f35d3.css。根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。

rev.manifest.json : 生成源文件和添加hash后文件的映射表
gulp-rev插件只能添加后缀, 不能讲html里的路径替换, 如果想要替换路径, 就需要gulp-rev-collector

更多使用文档请点击访问gulp-rev工具官网。

安装

一键安装不多解释

 npm install --save-dev gulp-rev

使用

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    gulp.src('src/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist'))
);

API

• rev() ： 给静态文件添加hash后缀
• rev.manifest(path, options) ： 生成文件映射

  • path（对照表文件存放路径）：
    类型 : string
    默认值: rev-manifest.json
    对照表文件存放路径。

  • options(选项) ：
    类型 : object

    • base
      类型 : string
      默认值: process.cwd()
      覆盖base清单文件的。

    • cwd
      类型：string
      默认值：process.cwd()
      覆盖清单文件的当前工作目录。

    • merge(合并)
      类型：boolean
      默认值：false
      合并现有清单文件。

    • transformer(变压器)
      类型：object
      默认值：JSON
      具有parse和stringify方法的对象。这可用于提供自定义转换器，而不是JSON清单文件的默认转换器。

原始路径
原始文件路径存储在 插件源码的 file.revOrigPath。对于重写资产引用之类的事情，这可能会派上用场。

资产哈希
每个修订文件的哈希存储在 插件源码的 file.revHash。您可以将其用于自定义文件重命名或构建不同的清单格式。

资产清单

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    // By default, Gulp would pick `assets/css` as the base,
    // so we need to set it explicitly:
    gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
        .pipe(gulp.dest('build/assets'))  // 复制原资产build目录
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))  // 写rev的资产build目录
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/assets'))  // 写入清单以build目录
);

将原始路径映射到修订路径的资产清单将写入build/assets/rev-manifest.json ：

{
    "css/unicorn.css": "css/unicorn-d41d8cd98f.css",
    "js/unicorn.js": "js/unicorn-273c2c123f.js"
}
 

默认情况下，rev-manifest.json将被整体替换。要与现有清单合并，merge: true请将和输出目的地（如base）传递至rev.manifest()：

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    // By default, Gulp would pick `assets/css` as the base,
    // so we need to set it explicitly:
    gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
        .pipe(gulp.dest('build/assets'))
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))
        .pipe(rev.manifest({
            base: 'build/assets',
            merge: true // 与现有清单合并（如果存在）
        }))
        .pipe(gulp.dest('build/assets'))
);

您可以选择调用rev.manifest('manifest.json')以为其指定其他路径或文件名。