简介
@os33/gulp-rev 是一款针对 gulp 前端构建工具的插件，能够为文件添加 hash 值，避免版本更新后浏览器缓存的问题。
安装
npm install @os33/gulp-rev --save-dev
使用
基本用法
const gulp = require('gulp');
const rev = require('@os33/gulp-rev');
gulp.task('rev', () =>
gulp.src('src/**/*.js') // 需要添加 hash 值的文件
.pipe(rev())
.pipe(gulp.dest('dist'))
);将 src/**/*.js 中的所有 js 文件添加 hash 值后输出到 dist 目录下。
配置选项
可以通过参数配置 rev 的行为。
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------------
----- ---------- - ----------------------------
---------------- -- -- -
----- ------- - -
----------------------- -------- ------ -------- -- - -------- -------------
------- ------ -- -
------ ----------------------------------------- -- -------
--
--------- --------------------------------- -- ----- -------------
--
------ -----------------------
-------------------
------------------------
---------------------
--------------------------- -- -------- ----
--------------------------- ------------------------------------ -- -- ---- ------
----------------------------
---includeFilesInManifest
类型：string[]
默认值：[]
说明：若指定，将生成的 manifest.json 文件中，对应的 key 将会添加源文件中的这些后缀名的文件，这些文件将会被复制到输出文件夹的目录中。
rename
类型：(file: { history: string[], cwd: string, base: string, path: string, stat: fs.Stats }, opts?: { keepExt?: boolean, overwrite?: boolean }) => string
默认值：undefined
说明：若指定，将对文件名进行修改。该选项接收一个函数，传入的参数为当前文件的路径信息和一些额外选项，函数返回重命名后的文件名。
选择该选项，可以给文件名添加前缀等。
manifest
类型：NodeJS.ReadWriteStream
默认值：undefined
说明：若指定，将使用给定的 manifest.json 文件。
一般情况下不需要指定，若需要通过替换 html 中的引用路径的插件来使用这个 manifest，需要给插件指定参数：{ manifest: gulp.src('path/to/manifest.json') }。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
----- ---------------- ------------------------------
-------
------
---- --------------------------- -----------
------- ----------------------------------
-------
-------p {
margin-bottom: 10px;
color: #789;
background-image: url("../img/bg.png?v=@@hash");
}-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------------
----- ---------- - ----------------------------
---------------- -- -- -
----- ------- - -
----------------------- -------- ------ --------
------- ------ -- -
------ -----------------------------------------
-
--
------ ------------------------------------------ --------------
-------------------
------------------------
---------------------
------------------------
--------------------------- -------------------------------------
-------------------------
---总结
以上就是对于 npm 包 @os33/gulp-rev 的使用教程，让我们可以轻松地为前端资源添加 hash 值，优化页面缓存问题。同时，通过灵活配置选项，@os33/gulp-rev 还能处理其他更加复杂的情况，为我们的前端开发带来更多便利和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570881e8991b448d3ef7