介绍
Grunticon-lib 是一个基于 Grunticon 的编译器，用于将 SVG 文件编译为 CSS 雪碧图、PNG 和 SVG 图片。它可以在项目构建过程中自动处理 SVG，便于前端开发人员快速构建 CSS 雪碧图和图片。
本教程将介绍如何使用 Grunticon-lib 和各种选项来优化您的项目。在掌握本教程的基础上，您将能够使用 Grunticon-lib 来创建自己的 CSS 雪碧图和图片。
安装
您可以使用 npm 直接安装 grunticon-lib，只需在终端中输入：
npm install grunticon-lib
用法
Gruntfile.js 的配置
要使用 grunticon-lib，您需要在项目目录中创建 Gruntfile.js 文件并编写以下代码：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
---------- -
-------- -
-- ----
--
------------ -
-- --
-
-
---
------------------------------------
--配置选项
在 Gruntfile.js 文件中，您可以配置以下选项：
- src: SVG 文件所在的目录，可以是数组或字符串，默认为 'src/icons'
- dest: 输出 CSS 雪碧图和图片的目录，可以是字符串，默认为 'dist'
- pngfolder: 输出 PNG 图片的目录，可以是字符串，默认为 'png'
- defaultWidth: CSS 雪碧图和 PNG 图片的默认宽度（像素），可以是数字或字符串，默认为 400
- defaultHeight: CSS 雪碧图和 PNG 图片的默认高度（像素），可以是数字或字符串，默认为 300
- formats: 要输出的图片格式，可以是数组或字符串，默认情况下，CSS 雪碧图和 PNG 图片都会被输出，SVG 图片不会被输出
- enhanceSVG: 是否优化 SVG 输出，可以是布尔值或对象，默认为 false
- dynamicColorOnly: 是否将颜色应用于 CSS 雪碧图，可以是布尔值，默认为 false
例如，以下是一个基本的配置：
grunt.initConfig({
grunticon: {
options: {
src: 'path/to/svg',
dest: 'path/to/output'
}
}
});下面是所有选项的详细说明：
src
SVG 文件所在的目录。可以指定一个字符串或一个数组，每个数组元素都是一个目录。如果不指定任何内容，则默认为 'src/icons'。
示例：
src: ['path/to/svg1', 'path/to/svg2']
dest
输出 CSS 雪碧图和图片的目录，可以是字符串。
示例：
dest: 'path/to/output'
pngfolder
输出 PNG 图片的目录，可以是字符串。
示例：
pngfolder: 'path/to/png'
defaultWidth
CSS 雪碧图和 PNG 图片的默认宽度（像素），可以是数字或字符串，默认为 400。
示例：
defaultWidth: 300
defaultHeight
CSS 雪碧图和 PNG 图片的默认高度（像素），可以是数字或字符串，默认为 300。
示例：
defaultHeight: 200
formats
要输出的图片格式，可以是数组或字符串。默认情况下，CSS 雪碧图和 PNG 图片都会被输出，SVG 图片不会被输出。
示例：
formats: ['svg', 'png']
enhanceSVG
是否优化 SVG 输出，可以是布尔值或对象。如果为 true，则所有 SVG 元素都将被优化。如果是对象，则允许您指定自定义参数。
示例：
enhanceSVG: true
dynamicColorOnly
是否将颜色应用于 CSS 雪碧图，可以是布尔值，默认为 false。
示例：
dynamicColorOnly: true
Grunticon 任务
完成上述配置后，您可以使用以下命令运行 grunticon 任务：
grunt grunticon
您可以通过 grunticon 任务的多个子任务来控制哪些文件应该被编译、优化等等。例如，以下是一些可以使用的子任务：
-- -------------------- ---- -------
------------------
---------- -
------ -
------ -
----- -------------------- ----- -----------------
-
--
--------- -
------ -
----- -------------------- ----- -----------------
--
-------- -
----------- ----
-
-
-
---在这个例子中，我们有两个子任务：build 和 optimize。build 子任务将简单地编译 SVG、CSS 和 PNG 文件。optimize 子任务将在编译后对 SVG 文件进行优化。
运行以下命令以运行这两个任务：
grunt grunticon:build grunt grunticon:optimize
示例代码
以下是一个完整的 Gruntfile.js 示例，它使用 Grunticon-lib 编译 SVG 文件，并将它们输出为 CSS 雪碧图和 PNG 图片：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
---------- -
------ -
------ -
-
------- -----
---- ------------
---- ----------
----- ------------
-
--
-------- -
----------- -----
----------------- ----
-
-
-
---
------------------------------------
----------------------------- ---------------
--在此示例中，我们使用 Grunticon-lib 编写了一个名为 icons 的任务。该任务将在 'src/icons' 目录中搜索所有 SVG 文件，并将它们编译为 CSS 雪碧图和 PNG 图片。输出文件将位于 'dist/icons' 目录中。
我们还指定了一些附加选项，包括 SVG 优化，仅将颜色应用于 CSS 雪碧图等。
要运行此任务，请输入以下命令：
grunt
结束语
本教程介绍了 Grunticon-lib 的使用方法，以及 Gruntfile.js 中可用的可配置选项。当结合 Grunt 或 Gulp 等自动化构建工具时，Grunticon-lib 可以非常方便地将 SVG 转换为 CSS 雪碧图和 PNG 图片。
最后，我们希望您可以将本教程中所学的知识用于实际项目中，并从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73264