在前端开发中，我们经常需要将 CSS 中引用的图片或其他资源进行压缩或 base64 编码，以减少 HTTP 请求的数量，提高页面性能。grunt-css-url-embed 是一个可以帮助我们实现这一任务的 npm 工具包。
安装
在使用 grunt-css-url-embed 之前，我们需要确保已经安装了 Node.js 和 npm。安装命令如下：
npm install -g grunt-cli // 全局安装 grunt-cli npm init -y // 快速初始化一个 package.json 文件 npm install --save-dev grunt grunt-css-url-embed // 安装 grunt 和 grunt-css-url-embed
配置
首先，在项目根目录下创建一个名为 Gruntfile.js 的文件，该文件是 grunt 的配置文件，用于描述任务以及任务之间的依赖关系。
在 Gruntfile.js 中，我们需要先加载 grunt 和 grunt-css-url-embed：
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-css-url-embed');
}然后，我们需要定义一个任务，用于对 CSS 文件进行处理。在这个任务中，我们指定要处理的 CSS 文件路径以及处理后的输出路径：
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
------------ -
------- -
------ -
----------------- ---------------
-
-
-
---
------------------------------------------
-在这个配置中，'src/style.css' 代表要处理的源文件路径，'dest/style.css' 代表处理后的输出路径。因为 grunt-css-url-embed 可以同时处理多个文件，因此 files 属性也可以设置为一个数组，例如：
-- -------------------- ---- -------
------------ -
------- -
------ --
------- -----
---- ------
---- ----------
----- -------
---- ------
--
-
-在这个配置中，expand=true 表示开启文件夹和子文件夹的遍历扫描，cwd 表示相对路径的起始位置，src 表示要操作的文件，dest 表示要输出的目录，ext 表示输出文件的后缀名。
使用
配置完毕后，我们就可以执行 grunt 任务了：
grunt cssUrlEmbed:encode
执行该任务后，grunt-css-url-embed 会自动将 CSS 中的图片链接进行 base64 编码，并且自动生成新的 CSS 文件，输出到指定的目录中。
示例代码
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
------------ -
------- -
------ -
----------------- ---------------
-
-
-
---
------------------------------------------
----------------------------- -----------------
-总结
通过使用 grunt-css-url-embed，我们可以轻松地将 CSS 中的图片链接进行压缩或 base64 编码，减少 HTTP 请求的数量，提高页面加载性能。同时，通过配置 grunt 的任务，我们还可以将其打包进项目构建流程中，自动化处理 CSS 文件，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc4fcb5cbfe1ea06121c5