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')以为其指定其他路径或文件名。