简介
gulp-rev2 是一款基于 gulp-rev 版本的前端自动化工具，它能够为静态资源自动生成唯一的版本号，有效避免缓存问题，并能自动替换 HTML、CSS、JS 等文件中引用的资源链接，从而使浏览器自动获取最新的版本。
gulp-rev2 相对于 gulp-rev 来说，在生成唯一版本号的过程中，采用了更加安全的哈希算法，从而保证生成的版本号不易被攻击破解。
安装
如果你还未安装 gulp-rev2，请先执行以下命令进行安装：
npm install gulp-rev2 --save-dev
基本用法
1. 导入模块
在项目的根目录下创建一个 gulpfile.js 文件，然后导入 gulp-rev2 模块：
const rev = require('gulp-rev2');2. 初始化配置
gulp.task('rev', function () {
return gulp.src(['dist/**/*.{css,js}', 'dist/img/**/*.{jpg, png}']) // 需要添加版本号的源文件
.pipe(rev()) // 生成唯一版本号
.pipe(rev.manifest()) // 生成映射文件
.pipe(gulp.dest('dist')) // 生成缓存文件到指定目录下
})3. 替换文件
在 index.html 文件中，将引用静态资源的链接用 gulp-rev-append 模块进行替换：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-----------------------
----- ---------------- --------------------------------
-------
------
------- --------------------------------------
-------
-------其中，@@hash 表示唯一版本号。
4. 生成新文件
在执行 gulp rev 命令后，会在 dist 目录下生成带版本号的文件，并且会生成一个 rev-manifest.json 文件，该文件用于存储被替换过的静态资源路径和版本号的映射关系。
{
"css/index.css": "css/index-4bdad09c13.css",
"js/index.js": "js/index-00b8d7d78e.js",
"img/logo.jpg": "img/logo-7d93127375.jpg"
}高级用法
1. 自定义哈希算法
如果你想自定义哈希算法，在初始化配置时可以配置 hashLength 参数：
gulp.task('rev', function () {
return gulp.src(['dist/**/*.{css,js}', 'dist/img/**/*.{jpg, png}'])
.pipe(rev({
hashLength: 8 // 自定义哈希长度，默认是 8
}))
.pipe(rev.manifest())
.pipe(gulp.dest('dist'))
})2. 只生成缓存文件
如果你只需要生成有唯一版本号的缓存文件，而不需要在 HTML、CSS、JS 文件中进行自动替换，可以使用以下配置：
-- -------------------- ---- -------
---------------- -------- -- -
------ ------------------------------- -------------------- -------
------------
--------------------------------------- - -- -----------
----- ------- -- -----------
------ ----
---
---------------------------- -- --------- --- ---
--结语
通过本文的学习，相信大家已经能够掌握 gulp-rev2 的基本使用方法，以及一些高级配置的使用技巧。在实际的前端开发中，使用 gulp-rev2 工具可以帮我们有效解决缓存问题，大幅提高用户浏览体验和网站访问速度，是我们不可或缺的前端自动化工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e2951