前言
在前端开发中，为了提高网站加载速度，经常需要将多张小图标合成为一张大图标，这可以通过使用 CSS Sprites 实现。然而，手动将多张小图标拼接成一张大图标是一项非常繁琐和耗时的任务，尤其是当需要对已有的 CSS Sprites 进行修改时。这时候，我们可以使用 npm 包 spritewerk 在构建过程中自动化生成 CSS Sprites。
什么是 spritewerk？
spritewerk 是由 Getanewsletter 开发、基于 Node.js 的 npm 包，可用于将多张小图标组合成一张大图标，并生成对应的 CSS 代码。
spritewerk 使用 spritesmith 库实现了雪碧图的生成和拼接，同时支持通用 CSS 的生成，以及 retina 屏幕适配。
怎样使用 spritewerk？
安装
使用 spritewerk 需要先安装 Node.js 环境，然后通过 npm 命令来安装 spritewerk 。在终端中运行以下命令：
npm install spritewerk --save-dev
安装完成后，你就可以在你的项目代码里使用 spritewerk 了。
配置
首先，我们需要在项目代码中的 build 脚本里添加使用 spritewerk 的命令。示例代码如下：
const spritewerk = require('spritewerk');
const inputDir = 'src/images/icons/*.{png,jpg,jpeg,gif}';
const outputDir = 'dist/images/sprites.png';
const cssDir = 'dist/css/sprites.css';
spritewerk(inputDir, outputDir, cssDir);以上代码实现了将 src/images/icons 目录下的所有 png、jpg、jpeg 和 gif 格式的图片拼接成一张大图标，并将生成的大图标保存到 dist/images/sprites.png 文件中。同时，它还将生成对应的 CSS 代码并保存到 dist/css/sprites.css 文件中。
在运行 build 命令时，spritewerk 将会自动将这些小图标拼接起来，并输出一个大图标和对应的 CSS 代码。
参数说明
spritewerk 函数有三个参数，分别是：
inputDir：表示小图标所在的目录路径，支持 glob 语法；outputDir：表示生成的大图标文件的保存路径；cssDir：表示生成的 CSS 代码文件的保存路径。
除此之外，spritewerk 还支持其他一些可选参数，例如：
layout：表示拼接方式，支持水平、垂直、矩阵等方式；cssTemplate：表示 CSS 代码的模板文件路径，用于自定义 CSS 代码的生成方式；retina：表示是否支持 retina 屏幕适配。
关于这些参数的更详细说明可以参考 spritewerk 的官方文档。
示例
下面来看一个完整的示例，在一个新建的工程中使用 spritewerk 将多张小图标拼接成一张大图标，并通过引用生成的 CSS 文件来展示这些图标。
准备工作
首先，我们需要在新建的工程中找一些小图标。在这里，我从 Font Awesome 中选择了一些图标。
然后，我们需要将这些图标拷贝到 src/images/icons 目录下。如下所示：
安装和配置 spritewerk
接下来，我们需要在终端中运行以下命令来安装 spritewerk：
npm install spritewerk --save-dev
然后，我们需要打开 package.json 文件，在其中的 scripts 中增加 build 命令。这个命令用于在工程中运行 spritewerk，并将生成的大图标和 CSS 文件保存到对应的输出目录中。修改后的 package.json 文件如下所示：
-- -------------------- ---- -------
-
------- ------------------
---------- --------
---------- -
-------- ----------- ------------------------------------- ----------------------- ---------------------
--
------------------ -
------------- --------
-
-运行 build 命令
接下来，在终端中运行以下命令来生成大图标和对应的 CSS 文件：
npm run build
运行完成后，你将看到在 dist 目录下生成了 images/sprites.png 和 css/sprites.css 两个文件。
使用生成的大图标和 CSS 文件展示图标
最后，我们将在 HTML 文件中使用生成的大图标和 CSS 文件来展示这些图标。打开 index.html 文件，增加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
----- ---------------- -----------------------
-------
- -
------------- -----
-
-------- -
-------------------- ------ ------
------ -----
------- -----
-------- -------------
------------ --------
-
--------- -
-------------------- ----- ------
------ -----
------- -----
-------- -------------
------------ --------
-
------------- -
-------------------- ----- ------
------ -----
------- -----
-------- -------------
------------ --------
-
--------
-------
------
-------------- ---------
---
-- --------- -----------------
-- --------- --------------------
-- --------- ------------------------
----
-------
-------在这个示例中，我使用了 Font Awesome 中的图标，以展示如何在生成的 CSS 文件中使用 sprite 图标。
最后，在浏览器中打开 index.html 文件，你将看到以下效果：
总结
本文介绍了 npm 包 spritewerk 的使用教程，并提供了一个完整的示例，以展示 spritewerk 在真实项目中的应用场景。希望这篇文章能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111efe6