在前端开发中，使用雪碧图可以显著地减少网页加载时间和HTTP请求次数，提升页面加载速度。spritesh 是一个优秀的 npm 包，它能够将多张图片合并成一张雪碧图，并生成对应的样式文件。
1. 安装 spritesh
使用 npm 安装 spritesh：
--- ------- -- --------
spritesh 是一个用 Node.js 实现的工具，因此需要先安装 Node.js 环境。
2. 使用 spritesh
2.1. 命令行使用
命令行使用 spritesh 最简单的方式是将需要合并的图片放在同一个目录下，然后执行以下命令：
-------- -------- --------
其中，<source> 代表源图片所在的目录，<output> 代表生成的雪碧图和样式文件所在的目录。
例如，将 ./images 目录下的所有 PNG 图片合并成一张雪碧图，并生成对应的样式文件，可以执行以下命令：
-------- -------- --------
执行完毕后，在 ./output 目录下会生成以下三个文件：
sprite.png：生成的雪碧图文件。sprite.css：生成的样式文件。sprite.json：生成的映射表，记录了每个小图在雪碧图中的坐标和尺寸信息。
除了这种最简单的用法之外，spritesh 还支持更多高级的用法，如自定义样式模板、自定义命名规则、自定义输出格式等，在本篇教程的后面将介绍。
2.2. Gulp 和 Grunt 插件
spritesh 还提供了 Gulp 和 Grunt 的插件，方便开发者在构建工具中集成雪碧图合并的功能。
以 Gulp 为例，需要先安装 Gulp：
--- ------- -- ----
然后安装 gulp-spritesh：
--- ------- ---------- -------------
在项目中使用 gulp-spritesh：
----- ---- - ----------------
----- -------- - -------------------------
-------------------- ---------- -
----- ------- - -
-------- ------------------------ -- ---------
----------- --------------------------- -- ----------
------- ----- -- ---- ------ --
-------- -- -- -------
---------- ------------- -- ----
--
------ -----------------------------
-------------------------
---3. 更多用法
3.1. 自定义样式模板
spritesh 支持自定义样式模板，可以让开发者更加灵活地控制生成的样式文件的格式和样式。
例如，下面是一份简单的自定义样式模板：
-- --- ---- - - -- --- - --------------- - - ---- ---- - -- ----------- --------------- -- - ----------------- ------- ----------------- ---- ------ --- ---------------- --- ------- --- ----------------- --- -------------------- --- ------------------- -- --- ------------------- --- - -- - --
其中，spritesheet 和 sprites 对应着 sprite.json 文件中的内容。使用自定义样式模板需要在 options 中指定：
----- ------- - - -------- ------------------------ -- --------- ----------- --------------------------- -- ---------- ------- ----- -- ---- ------ -- -------- -- -- ------- ---------- -------------- -- ---- ------------ ----------------------- -- --------- --
3.2. 自定义命名规则
默认情况下，spritesh 会根据小图文件的文件名来生成样式类名，例如，文件名为 button.png 的小图，样式类名为 .button。
如果没有按照一定的规则来命名小图文件，样式类名可能会比较乱。为了解决这个问题，我们可以自定义命名规则，例如，将所有小图的类名都添加 icon- 前缀：
----- ------- - -
-------- ------------------------ -- ---------
----------- --------------------------- -- ----------
------- ----- -- ---- ------ --
-------- -- -- -------
---------- -------------- -- ----
-------- -
--------- -------------- -
------ -------- - ----------
-
-
--3.3. 自定义输出格式
默认情况下，spritesh 会生成三个文件：雪碧图文件、样式文件和映射表文件。如果需要更灵活地控制输出格式，可以通过设置 format 选项来实现。
例如，以下是一份自定义格式的示例代码：
----- -- - --------------
----- ------- - --------------------
----- ---------- - ----------------------
----- ------- - -
------- -
---- -------------- -
------ ------ -
------ ----------------
------- -----------------
---------- ----------------
----------------- -----------------------
---
--
--- -------------- -
----- --------- - -
------ ------ - ---
- ------ ----------------
- ------- -----------------
- ---- ----------------------
- ---------- --
--
--- ------ ------ -- ------------- -
---------------- ----------------- ----
---------------- -- ----------------------
---------------- -- ----------------------
---------------- ------ -------------------
---------------- ------- -------------------
---------------- -----
-
---------------- ----
---------------------
------ ---------------------
--
------- -------------- -------- -
------ --- ------------------------- ------- -
----- --------- - ---------------
----- ------ - ----------
------------------ --------
------------------- ---------- -
--------------------------- ------------- ------- -
-- ----- -
------ ------------
-
----- ----------- - --------------------------
----- ------ - ---------------------------------------
----- --- - ------------------------ -
-------- ------
--------- --------
----------- ----
--
------------- -----------------------------
------------- ---------- - -----
-------------- ----------- - -----
--------------- -- - ------------- ----------------
------------
-------------
------------ -----------
----------- - -------- ------------- ---
------
--- ------ ------ -- ------------- -
----------------- -
--- ------------
-------- -- - --------------- -----------------
--
------------- -
---------- -------
------ -----------
------- ------------
-- -----------------
-- ----------------
---
-
----- ------ - ---------
------- -----
------- - --
-------- ----
---
----------------
---
---
---------------------------------
-------------
---
-
-
--
-------------------- ---------- -
------ -----------------------------
-------------------------
---在上面的示例中，通过设置 css、js 和 sprite 三个函数来自定义生成的样式和输出格式。这里的 css 和 js 函数分别对应着生成的样式和 JS 代码，而 sprite 函数则生成了一个 SVG Sprite 文件，例如：
---- ---------------------------------- ------------ ------------- ---------- - -- ----
------
------ ----------------
----- - -------- ------------- -
--------
-------
------- ----------- ---------- - -- ----
------ --------------------------------------------------------------------------------------------------------------------------------------------------
---------
------- --------- ---------- - -- ----
------ -------------------------------------------------------------------------------------------------------------------------------------------------------
---------
------通过自定义输出格式，我们可以将雪碧图整合到 SVG 文件中，更方便地在网页中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb2eb5cbfe1ea0612565