在前端开发中，使用雪碧图可以显著地减少网页加载时间和HTTP请求次数，提升页面加载速度。spritesh 是一个优秀的 npm 包，它能够将多张图片合并成一张雪碧图，并生成对应的样式文件。
1. 安装 spritesh
使用 npm 安装 spritesh：
npm install -g spritesh
spritesh 是一个用 Node.js 实现的工具，因此需要先安装 Node.js 环境。
2. 使用 spritesh
2.1. 命令行使用
命令行使用 spritesh 最简单的方式是将需要合并的图片放在同一个目录下，然后执行以下命令：
spritesh <source> <output>
其中，<source> 代表源图片所在的目录，<output> 代表生成的雪碧图和样式文件所在的目录。
例如，将 ./images 目录下的所有 PNG 图片合并成一张雪碧图，并生成对应的样式文件，可以执行以下命令：
spritesh ./images ./output
执行完毕后，在 ./output 目录下会生成以下三个文件：
sprite.png：生成的雪碧图文件。sprite.css：生成的样式文件。sprite.json：生成的映射表，记录了每个小图在雪碧图中的坐标和尺寸信息。
除了这种最简单的用法之外，spritesh 还支持更多高级的用法，如自定义样式模板、自定义命名规则、自定义输出格式等，在本篇教程的后面将介绍。
2.2. Gulp 和 Grunt 插件
spritesh 还提供了 Gulp 和 Grunt 的插件，方便开发者在构建工具中集成雪碧图合并的功能。
以 Gulp 为例，需要先安装 Gulp：
npm install -g gulp
然后安装 gulp-spritesh：
npm install --save-dev 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
