前言
在前端开发过程中，打包部署是一个重要的环节。为了避免缓存机制的影响，我们通常会对文件进行版本控制。而 gulp-rev-stamp，是一个方便的 Gulp 插件，可以自动给文件名添加版本戳，从而使浏览器重新加载文件。
本文将介绍如何使用 gulp-rev-stamp。
安装
在项目根目录下执行以下命令：
--- - ---------- --------------
使用
(1) 导入
----- ---- - ---------------- ----- --- - -------------------- ----- -------- - --------------------------
(2) 使用
将需要添加版本戳的文件放在一个数组中，例如：
----- ------- - ----------------
在 Gulp 任务中使用 gulp-rev 做文件哈希处理，并使用 gulp-rev-stamp 给文件名添加版本戳。
---------------- -- -- -
------ ----------------- - ----- ----- --
------------
----------------- -- -----
------------------------
---------------------
-----------------------------
---在 dist 目录下生成带有版本戳的文件名和记录哈希值的 manifest 文件。
例如：
-----
--- --
- --- ------------------ -- --------
--- ---
--- ----------------- -- -----(3) 替换
最后，在 HTML 文件中将原路径替换为加上版本戳之后的路径。
--------- ----- ------ ------ ----- ---------------- --------------------- --------------- ----- ---------------- -------------------------------- ---- ------ --- ------- ------ ------- -------------------------------------- ---- ------ --- ------- -------
使用 gulp-replace 插件将原路径“/css/main.css”替换为加上版本戳之后的路径“/css/main-47a2f2cbdb.css”。
----- ------- - ------------------------
-------------------- -- -- -
----- -------- - ---------------------------------------
------ ----------------------
------------------------------ - -- ---------------------------------------------------------------
---------------------------- - -- --------------------------------------------------------------
-------------------------
---经过替换后的 HTML 文件如下：
--------- ----- ------ ------ ----- ---------------- --------------------- --------------- ----- ---------------- -------------------------------- ------- ------ ------- -------------------------------------- ------- -------
总结
gulp-rev-stamp 可以自动给文件名添加版本戳，避免缓存机制带来的影响。本文介绍了使用 gulp-rev-stamp 的流程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056e3d81e8991b448e7393