在前端开发中，我们经常会遇到需要将 HTML 文件中引用的 CSS、JS 文件进行合并、压缩等处理。而在合并的过程中，我们很容易遇到版本控制的问题。为了解决这个问题，我们可以使用 gulp-injectmd52self 这个 npm 包来给静态资源文件添加 md5 值，从而解决静态文件的缓存问题。
安装
在项目中，我们可以通过 npm 安装 gulp-injectmd52self，命令如下：
--- ------- ------------------- ----------
安装成功后，我们就可以在 gulpfile.js 中引入该模块：
----- -------------- - -------------------------------
接下来，我们来看一下具体的配置。
使用方法
gulp-injectmd52self 提供了两个方法：injectmd52self 和 rename。其中，injectmd52self 方法用于添加 md5 值，而 rename 方法则用于重命名文件名称。
injectmd52self 配置
我们可以在 gulp 任务中使用 injectmd52self 方法来生成添加了 md5 值的静态资源文件：
------------------- -- -- -
------ ----------------------
-----------------------
-------------------------
---在这个配置中，我们将 index.html 文件通过 gulp.src 函数读取，并使用 pipe 方法传递给 injectmd52self 方法进行处理。然后我们将处理后的文件通过 pipe 方法传递给 gulp.dest 方法进行保存，路径为 dist 目录下。
当然，我们也可以通过一些配置项来对一些参数进行调整。下面是一些常用的配置项：
| 配置项 | 说明 | 默认值 |
|---|---|---|
| length | md5 值的长度，可选取 8、10、16、32 或 64。 | 8 |
| ignoreLength | md5 值不包含文件名长度。 | false |
| md5Name | md5 值后缀名，建议和文件名之间使用分隔符，例如 -、_ 等。 | .md5 |
| base | 相对路径的基础路径。 | process.cwd() |
| hashFunc | 使用的 hash 算法，可选值为 'md5'、'sha1'、'sha256' 等。默认为 md5 | md5 |
下面是一个配置示例：
----------------------
----------------------
------- -- -- - - - ---- -
------------- ------ -- ----- ---- -
-------- ------- -- ---- --- ---- -----
----- ---------- -- ------------------
--------- ----- -- -- --- -- ---- --
---
-------------------------rename 配置
在 injectmd52self 处理后，我们的文件名已经发生了变化。此时，我们可以在项目中引入 gulp-rev-collector 这个 npm 包，将 manifest 中存储的文件名信息进行替换，以达到文件的最终版控制。
----- ------------ - ------------------------------
---------------- -- -- -
------ -------------------------- ---------------
--------------------
------------- ----
---
-------------------------
---代码中的 rev/**/*.json 表示我们需要处理的 manifest 文件路径，dist/*.html 表示我们需要替换的 HTML 文件路径。在执行该任务之前，需要先执行 inject 任务生成 dist/*.html 文件。
示例代码
最后，我们来看一下示例代码。我们假设有如下文件结构：
-------
--- -----------
--- ----------
--- ---
--- --
- --- -------
- --- -------
--- ---
--- ----------
--- --------我们的目标是将所有的 CSS 和 JS 文件全部合并成一个，然后进行压缩处理，并给静态资源文件添加 md5 值，在 HTML 文件中进行引用，并替换版本号。
gulpfile.js 的配置如下：
----- ---- - ----------------
----- -------------- - -------------------------------
----- ------ - -----------------------
----- -------- - -----------------------
----- --------- - --------------------------
----- ------ - -----------------------
----- --- - ---------------
----- --- - --------------------
----- ------------ - ------------------------------
------------------ -- -- -
------ --------------
---
---------------- -- -- -
------ -------------------------
--------------------------
------------------
------------
----------------------------
--------------------
----- -------------------------------
------ ---- -- ---- -------- --
---
------------------------
---
--------------- -- -- -
------ -----------------------
-------------------------
-----------------
------------
---------------------------
--------------------
----- ------------------------------
------ ----
---
------------------------
---
------------------- -- -- -
------ ----------------------
-----------------------
-------------------------
---
---------------- -- -- -
------ -------------------------- ---------------
--------------------
------------- ----
---
-------------------------
---
------------------ --------------------- ------ ----- --------- ---------在执行该任务之后，我们会在 dist 和 rev 目录下得到如下文件：
---- --- --- - --- -------------------- - --- ------------------------ --- -- - --- ------------------- - --- ----------------------- --- ---------- --- --- ----------------- --- ----------------
其中，dist 目录下的 index.html 文件已经替换了资源文件的路径，并添加了版本 md5 值；同时 CSS 和 JS 文件都已经被合并、压缩，并拥有了自己的版本 md5 值。rev 目录下的 manifest 文件则分别存储了 CSS 和 JS 文件的原始文件名与 md5 文件名之间的映射关系。
最后，我们将 dist 目录下的文件上传到服务器上，就达到了版本控制的目的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e081e8991b448d764b