介绍
在前端开发中，网页中引用的图片等资源需要加上版本号，为了避免缓存问题。手动添加版本号是非常麻烦的，而 gulp-make-css-url-version-s 这个 npm 包则可以自动给 CSS 文件中的图片等资源文件添加版本号，省去了手动添加的麻烦。
安装
在使用之前，我们需要安装 gulp-make-css-url-version-s，执行以下命令进行安装：
--- ------- --------------------------- ----------
使用
为了展示 gulp-make-css-url-version-s 的使用方法，我们先建立一个简单的项目：
这个项目中有一个源代码目录 src，里面有一个 CSS 文件夹（css），里面有一个 index.css 文件，以及一个 images 文件夹，里面有一个图片文件 1.png。
首先，在项目根目录创建一个 gulpfile.js 文件：
----- ---- - ----------------
----- ---------- - ---------------------------------------
-------------------- ---------- -
-------------------------
-------------------
-----------------------------
---我们先 require 引入 gulp 和 gulp-make-css-url-version-s，然后新增一个 default 的任务，这个任务处理完后将 src/css 目录下的所有 CSS 文件都处理一遍，通过 pipe 函数调用 cssVersion() 函数后添加版本号，最后输出到 dist/css 文件夹下。
接下来我们运行 gulp 默认任务：
----
运行成功后，会在 dist/css 目录下生成一个 index.css 文件，这个文件中所有引用的资源都已经加上了版本号。打开这个 CSS 文件可以看到：
---- -
----------- --------------------------------
-成功给图片资源文件添加了版本号参数 v=20220101。
详解
gulp-make-css-url-version-s 和 gulp 一样，是一个流式处理库，他是通过 stream.Transform 的方式将资源文件的路径中，进行版本号的更新和返回。
gulp-make-css-url-version-s 会自动识别 CSS 文件中 url 属性中的图片等资源，将其加上 v 参数的版本号参数。
例如：background:url("/images/1.png");
修改为：background:url("/images/1.png?v=20220101");
总结
gulp-make-css-url-version-s 提供了一个方便、快捷的方式给网页中的图片等资源添加版本号，便于避免缓存问题。通过本文教程，我们可以快速的了解和使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566ad81e8991b448e2ea1