前言
随着前端开发的快速发展，自动化工具已经成为了一个必不可少的环节。在其中，gulp 是一个非常常用的自动化构建工具。而在使用 gulp 构建项目时，我们经常会需要处理文件版本号等问题，这时就需要使用到 gulp-rev-admui-collector 这个 npm 包。
gulp-rev-admui-collector 是一个基于 gulp-rev 的插件，它能够在文件名后面添加版本号，并且将生成的文件路径和版本号记录在一个 json 文件中，以供后续使用。同时，它还能根据项目中的 Admui 后台模板对资源路径进行处理。
本文将详细介绍 gulp-rev-admui-collector 的使用方法，并通过示例代码展示其用法。
安装
gulp-rev-admui-collector 可以通过 npm 安装，执行以下命令即可：
npm install gulp-rev-admui-collector --save-dev
使用方法
引入模块
在 gulpfile.js 文件中引入 gulp-rev-admui-collector 模块：
var revCollector = require('gulp-rev-admui-collector')修改文件路径
使用 gulp-rev 生成的文件名格式通常为 file-f43734c9.css，其中版本号的格式为文件名+hash 值。但是在 Admui 后台模板中，我们需要将文件路径修改为 /assets/(file-f43734c9.css) 的形式，以适应后台模板的规则。
-- -------------------- ---- -------
-------------------------- -------- -- -
------ -------------------------- -----------------
--------------------
------------- -----
---------------- -
------------ ----------
-
---
-----------------------
--在代码中，我们使用 gulp-rev 生成的 manifest 文件，请确保已经在生成 rev 文件时启用了这个文件，并将其放置在了 rev 目录下。在执行 rev-collector 任务时，我们配置了 replaceReved 参数为 true，表示替换生成的新文件的路径。dirReplacements 参数指定了替换的规则，将内容文件夹下的所有路径替换为 /assets/ 目录下的路径。
使用示例
假设我们要将 css 样式文件添加版本号并且放在 /assets/css 文件夹中，那么我们的 gulpfile.js 文件应该按照以下方式编写：
-- -------------------- ---- -------
--- ---- - ---------------
--- --- - -------------------
--- ------------ - -----------------------------------
-------------------- -------- -- -
------ -------------------------
------------ -- --- ---- -----
-----------------------------------
--------------------- -- -- -------- --
---------------------------
--
-------------------------- -------- -- -
------ -------------------------- -----------------
--------------------
------------- -----
---------------- -
------------ ----------
-
---
-----------------------
--
-------------------- ---------------------- -----------------在本示例代码中，我们定义了两个任务，分别是 rev-css 和 rev-collector。rev-css 任务用于给 css 样式文件添加版本号，同时生成一个 manifest 文件，放置在 rev/css 目录下；rev-collector 任务用于根据 manifest 文件将文件路径替换为 Admui 后台规范的路径。
执行 gulp default 命令后，任务顺序如下：
- rev-css 任务会生成带 hash 值的文件，同时生成一个 manifest 文件，放置在 rev/css 目录下
- rev-collector 任务会先读取 rev/css 目录下的 manifest 文件，然后对 src 目录下的 html 文件进行处理，将原来的文件路径修改为 /assets/css 格式的路径。修改后的文件将重新写入 src 目录。
通过以上简单示例，你可以快速掌握 gulp-rev-admui-collector 的基本用法，并在项目中使用它轻松处理文件版本号问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ad81e8991b448d5fef