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