npm 包 gulp-rev-delete-original 使用教程
在前端开发中，我们经常需要进行文件版本管理，以确保资源更新时不会出现缓存不更新的问题，而 gulp-rev-delete-original 是一款方便快捷的 npm 包，可以帮我们生成版本号并自动删除原始文件。下面将详细介绍这款 npm 包的用法。
安装
npm install --save-dev gulp-rev-delete-original
使用方法
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
----- ----------------- - ------------------------------------
------------------- -------- -- -
------ --------------------------
------------
--------------------------
---------------------
--------------------------
--------------------------
---分析
上述代码中，我们首先引入了 gulp、gulp-rev 和 gulp-rev-delete-original 三个 npm 包，并定义了一个任务 static 。在任务中，我们首先选择需要处理的文件，并使用 gulp-rev 包进行版本号生成，并将文件输出到 dist 目录下。接着再使用 rev.manifest() 生产一个 manifest json 文件，用于后面的版本号映射。最后使用 gulp-rev-delete-original 包，删除原始文件，再将 manifest 文件输出到 rev 目录下。
实际应用
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------------- ---------- ----- ---------------- ------------------------------ ------- ------ ---------- ----------- ------- ------------------------------------ ------- -------
在实际应用中，我们可以在 index.html 文件中引用生成的带版本号静态资源，如 link 标签和 script 标签。此外，还可以通过读取 manifest 文件，将页面中的路径替换为带版本号的路径，以确保浏览器以正确的方式更新缓存。
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
----- ----------------- - ------------------------------------
----- -------- - --------------------
----- ---- - ----------------
----- --------------- - ------------------------------------------
----- --- - ---------------
---------------- -------- -- -
------ --------------------------
------------
--------------------------
---------------------
--------------------------
--------------------------
---
----------------- -------- -- -
-------------------------------
----- -------- - ------------------------------------
------ ---------------------------
----------------------------- -------- ---------- -
----- ---- - -----
----- ------- - -----------------------
-- -------- --- -------- -
--------- - -----------------------
-
------ -----
---
--------------------------- ------- ---- --- -
----- ---- - -----------------
----- -------- - --------------------------------
------------------- -------- -------------- -
----- ---------------- - ---------------------------------------
----- -------- - ------------------------ ----
-- ----------------------------------- --- --- -
----- --- - --- ---------------- -----
----- ----------- - --------------------- ----------------------------
-------------- - --- --------------------
-------- -------
-
-- ----------------------------------- --- --- -
-------- -------
-
---
------------------ -------- -- -
-------- -------
---
----------------
---
---------------------------
---
-------------------- ------------------- ----------上述代码中，我们定义了三个任务：rev、html 和 default。rev 和 html 分别用于版本号生成和页面生成，而 default 则是合并了两个任务的执行。
在 html 任务中，我们首先使用 del 包删除 dist 文件夹下所有的 html 文件。接着使用 vinyl-fs 包，将文件的 base 属性设置为文件所在的目录，以便后面进行路径替换。我们使用 through2 包，读取 html 文件内容，并通过 manifest 文件中的映射关系，将页面中的路径替换为带版本号的路径。最后将文件输出到 dist 目录下。
总结
gulp-rev-delete-original 是一款方便快捷的 npm 包，可以帮我们生成版本号并自动删除原始文件。在实际应用中，可以将生成的版本号和页面路径关联起来，以确保前端资源的缓存更新。掌握这款 npm 包的使用方法，对于前端工程师来说是一项不可或缺的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb718b5cbfe1ea061172b