npm包gulp-make-css-url-version-s使用教程

介绍

在前端开发中，网页中引用的图片等资源需要加上版本号，为了避免缓存问题。手动添加版本号是非常麻烦的，而 gulp-make-css-url-version-s 这个 npm 包则可以自动给 CSS 文件中的图片等资源文件添加版本号，省去了手动添加的麻烦。

安装

在使用之前，我们需要安装 gulp-make-css-url-version-s，执行以下命令进行安装：

npm install gulp-make-css-url-version-s --save-dev

使用

为了展示 gulp-make-css-url-version-s 的使用方法，我们先建立一个简单的项目：

这个项目中有一个源代码目录 src，里面有一个 CSS 文件夹（css），里面有一个 index.css 文件，以及一个 images 文件夹，里面有一个图片文件 1.png。

首先，在项目根目录创建一个 gulpfile.js 文件：

const gulp = require('gulp');
const cssVersion = require('gulp-make-css-url-version-s');

gulp.task('default', function() {
    gulp.src('src/css/*.css')
        .pipe(cssVersion())
        .pipe(gulp.dest('dist/css'));
});

我们先 require 引入 gulp 和 gulp-make-css-url-version-s，然后新增一个 default 的任务，这个任务处理完后将 src/css 目录下的所有 CSS 文件都处理一遍，通过 pipe 函数调用 cssVersion() 函数后添加版本号，最后输出到 dist/css 文件夹下。

接下来我们运行 gulp 默认任务：

gulp

运行成功后，会在 dist/css 目录下生成一个 index.css 文件，这个文件中所有引用的资源都已经加上了版本号。打开这个 CSS 文件可以看到：

body {
    background: url(../images/1.png?v=20220101);
}

成功给图片资源文件添加了版本号参数 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