介绍
gulp-make-css-url-version-extend 是一个用于给 CSS 中的 URL 链接加上版本号的插件，它可以帮助前端开发者解决浏览器缓存问题，让新的样式能够被用户及时地下载和使用。
这个插件依赖于 gulp，因此需要安装 Node.js 和 Gulp 环境才能使用。
安装
使用 npm 安装 gulp-make-css-url-version-extend:
npm install gulp-make-css-url-version-extend --save-dev
使用方法
在 gulpfile.js 中添加以下代码：
var cssVersion = require('gulp-make-css-url-version-extend');
gulp.task('css', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssVersion())
.pipe(gulp.dest('dist/css'));
});这个代码片段中，我们首先引入了 gulp-make-css-url-version-extend，然后定义了一个名为 css 的任务，这个任务使用了 gulp.src 方法查找 app/css 目录下所有的 .css 文件。然后，我们调用了 cssVersion() 方法来将 CSS 文件中的 URL 链接加上版本号（默认是使用文件的最后修改时间作为版本号）。最后，我们使用 gulp.dest 方法将修改后的 CSS 文件输出到 dist/css 目录下。
参数选项
如果你想要对版本号的生成方式进行个性化设置，可以在 cssVersion() 方法中传递一个对象，这个对象可以包含一些参数选项来定制版本号生成规则。
以下是各个选项的含义和默认值：
base：String，用于计算相对路径的基础路径，默认值为 CSS 文件所在的目录。key：Function，用于计算版本号的 key 值，参数列表包括文件路径和文件信息，返回值为 key 值，如果不定义，则默认采用文件的最后修改时间。value：Function，用于计算版本号的 value 值，参数列表包括文件路径和文件信息，返回值为 version=value 格式的字符串，如果不定义，则默认采用文件的最后修改时间。mode：String，版本号的模式，可选值为 "query"（添加到查询参数中）和 "pathname"（添加到路径中），默认值为 "query"。hashLength：Number，版本号的长度（只有在 key 和 value 均不指定时才生效），默认值为 16。
下面是一个自定义参数选项的例子：
-- -------------------- ---- -------
---------------- ---------- -
------ ----------------------------
------
------------
----- ------
---- -------------- -
------ ---------------------------- ----------------------- -----
--
------ -------------- -
------ -----------
--
----- -----------
----------- -
--
-
-----------------------------
---在这个例子中，我们重新定义了 key 和 value 函数来生成自己的版本号。在 key 函数中，我们将文件路径中的反斜杠替换成斜杠，并且将每个路径段的值转化为 “.” 字符。这样，我们就可以根据 CSS 文件的路径来生成版本号。在 value 函数中，我们直接返回当前时间的毫秒值作为版本号，这样我们就可以避免使用文件最后修改时间的问题。最后，我们将模式设置为 "pathname"，将版本号添加到路径当中，并且将生成的版本号长度设置为 8。
使用示例
假设我们有以下的目录结构：
项目根目录
├── app
│ ├── css
│ │ └── index.css
│ └── js
└── dist
└── css
└── index.css我们的目标是在编译 CSS 文件时，给 URL 链接添加版本号，将编译后的文件输出到 dist/css 目录下。
index.css 内容如下：
-- -------------------- ---- -------
-- --------- --
---- -
----------------- ---------------------
------ ----
-
- -
----------------- -------------------------
------ -----
-我们需要在 gulpfile.js 文件中添加以下代码：
var cssVersion = require('gulp-make-css-url-version-extend');
gulp.task('css', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssVersion())
.pipe(gulp.dest('dist/css'));
});然后在命令行执行以下命令：
gulp css
执行完毕后，我们的 dist/css/index.css 文件会变成这样：
-- -------------------- ---- -------
-- --------- --
---- -
----------------- -------------------------------------
------ ----
-
- -
----------------- -----------------------------------------
------ -----
-可以看到，URL 链接上已经加上了版本号，这样我们在更新图片等资源时就不需要担心用户的浏览器缓存了。
总结
gulp-make-css-url-version-extend 是一个实用的 npm 插件，它可以让我们在编译 CSS 文件时自动为 URL 链接添加版本号。这个插件使用简单，可以方便地解决前端开发中的浏览器缓存问题。我们可以通过传递不同的参数选项来定制版本号的生成方式，从而满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730981e8991b448e9347