前言
在前端开发中，我们经常需要对静态资源进行版本管理，以便于缓存更新和浏览器缓存管理等。而 gobble-rev 就是一个非常好用的 npm 包，可以帮助我们自动添加 js、css、图片文件的哈希值，并在文件名中添加版本号，来实现版本管理的功能。本文将详细介绍 gobble-rev 的使用方法。
安装 gobble-rev
首先，我们需要全局安装 gobble 和 gobble-rev，可以使用以下命令进行安装：
npm install -g gobble gobble-rev
初始化 gobble 项目
在使用 gobble-rev 之前，我们需要先初始化一个 gobble 项目。可以使用以下命令进行初始化：
gobble init
接下来，我们需要把需要添加版本号的静态资源放到一个目录下面。以 js、css 和图片文件为例，我们可以在 assets 目录下新建三个子目录：js、css 和 img，并把相关的文件放到对应的目录下。
配置 gobble-rev
接下来，我们需要对 gobble 项目中的 gobblefile.js 进行配置，以便让 gobble-rev 对我们的静态资源进行处理。我们需要先添加 gobble-rev 的依赖关系：
var rev = require('gobble-rev');接着，我们需要使用 rev 对象对我们需要处理的资源进行设置。实际上 gobble-rev 可以通过多种方法来设置需要处理的文件，这里我们只介绍其中的两种：
设置一个 globs 参数
我们可以指定 globs 参数来告诉 gobble-rev 需要处理哪些文件。globs 参数可以是一个文件模式，也可以是一个文件模式数组。例如：
-- -------------------- ---- -------
-------------- - -------- ---------- ---------- -------- -
--- ----- - -----------------
----- - ---------- -
------ ----------- ----------- ----------- ----------- ------------ -----------
---
------ ------
--上面的代码指定了所有 js、css、png、jpg、jpeg 和 gif 文件需要被处理。通过设置 globs 参数，我们大大简化了文件处理的代码，也减少了出错的可能性。
设置多个 rev 参数
我们也可以使用多个 rev 参数来设置需要处理的文件。例如：
-- -------------------- ---- -------
-------------- - -------- ---------- ---------- -------- -
--- ----- - -----------------
----- - -----------
-------- ----------- -----------
---
----- - -----------
-------- --------------- ---------------
---
----- - -----------
------- ---------
---
------ ------
--上面的代码先排除了所有的 .min.js 和 .min.css 文件，接着在文件名前缀加上了 v1.0.0_，最后对所有指定文件进行了处理。
上面的这个例子演示了如何使用多个 rev 参数和参数之间的优先级。多个参数的调用顺序是需要注意的，因为后面的参数会覆盖前面的参数。在上面的例子中，exclude 参数覆盖了 include 参数，prefix 参数则覆盖了所有的 include 和 exclude 参数。
示例代码
-- -------------------- ---- -------
--- ------ - ------------------
--- --- - ----------------------
-------------- - -------- ---------- -
--- ----- - -----------------
----- - -----------
-------- --------------- ---------------
---
----- - -----------
-------- ----------- ----------- ----------- ----------- ------------ -----------
---
----- - -----------
------- ---------
---
----- - --------------------- ------ -
-- ---------------------- --- --- -
------ ----------------------- ------------------------------ -------- ----- ------ ------- -
------ ---------------------
---
- ---- -
------ -----
-
---
----- - -----------
------- -------- ------ -
------ ---------------------------- ------ -
-- ------------------ --- --- ------ -----
--- ----- - ----------------
--- --- - ------------
--- -------- - --------------- - --- - ----
------ ---------
-------------
-
---
------ ------
--总结
本文介绍了如何在前端项目中使用 gobble-rev 对静态资源进行版本管理，详细讲解了 gobble-rev 的使用方法和配置，同时也提供了一个示例代码。通过使用 gobble-rev，我们可以大大简化静态资源处理的代码，同时也可以方便地管理静态资源的版本，提高了代码的可维护性，是前端开发中非常好用的一个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6f255dee6beeee745c