在前端开发中，我们经常需要使用 gulp 任务自动化构建工具来实现代码的自动化处理，而其中一个常见的需求就是对 CSS 文件中的图片路径进行版本控制。这时候，我们可以使用一个 npm 包叫做 gulp-make-css-urlver，它可以方便地为 CSS 文件中的图片路径生成版本号，从而避免因缓存导致的图片无法更新的问题。
安装 gulp-make-css-urlver
在使用 gulp-make-css-urlver 之前，我们需要先安装它。可以通过 npm 来安装：
npm install gulp-make-css-urlver --save-dev
使用 gulp-make-css-urlver
使用 gulp-make-css-urlver 可以很方便地给 CSS 文件中的图片路径添加版本号。下面是使用 gulp-make-css-urlver 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------------
---------------- -------- -- -
------ -------------------------
-----------------
----------------- -------- ------ -
----- ------ - ------------------
----- ---- - -------------------------------------------------------------
------ ------------- ---
-
---
-----------------------------
---这段代码会将 src/css 目录下的所有 CSS 文件进行处理，并将处理后的文件输出到 dist/css 目录下。在处理文件时，gulp-make-css-urlver 会查找 CSS 文件中所有的 url() 函数，并为其中的图片路径生成一个版本号，然后将版本号添加到路径的末尾。例如，原来的样式可能是这样的：
.xxx {
background: url("../img/xxx.png");
}经过 gulp-make-css-urlver 的处理后就变成了这样：
.xxx {
background: url("../img/xxx.png?v=5a3d0177");
}其中，v=5a3d0177 就是生成的版本号。
在使用 gulp-make-css-urlver 时，可以通过传递一个配置对象来进行一些自定义设置。配置对象中可用的选项如下：
hashLength: 版本号的长度，默认为 8。customHashMethod: 自定义版本号生成方法，可以通过这个方法来生成自己想要的版本号。该方法可以接受一个文件对象作为参数，其中包含了文件的内容、文件的路径等信息。
总结
gulp-make-css-urlver 可以很方便地为 CSS 文件中的图片路径生成版本号，避免因缓存导致的图片更新问题。在使用时，需要先安装该 npm 包，然后通过 gulp 任务来对 CSS 文件进行处理，并将处理后的文件输出到指定的目录中。在处理文件时，可以通过配置对象来进行一些自定义设置，比如设置版本号的长度或者自定义版本号生成方法等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005560781e8991b448d3036