简介
sprity-gm 是一个 npm 包，可以帮助前端开发者快速生成雪碧图。相比于其他类似的 npm 包，sprity-gm 可以使用 GraphicsMagick，这意味着生成的雪碧图文件大小更小，生成速度更快。
安装
npm install sprity-gm --save-dev
使用方法
在项目根目录下创建一个名称为
sprites的目录，该目录下应该包含所有需要生成的图像文件。在项目中使用 sprity-gm，可以通过命令行或者 Node.js 代码的方式来实现。
命令行方式：
sprity sprites out -s style.css
该命令将会在
sprites目录下生成名为out.png的雪碧图，并且在生成的 CSS 文件中指定了图像的位置信息。Node.js 代码方式：
-- -------------------- ---- ------- ----- ------ - --------------------- --------------- ---- ---------------------- ---- ----- ----- ------ ------ ------------ ---------- -- ------ -- ---- -- -- - ------ -- ---- --- -- ---该代码片段会生成和命令行方式相同的雪碧图和 CSS 文件，并且可以在代码中进行更多的配置，比如生成多个尺寸的雪碧图。
示例代码
下面是一个完整的示例代码，可以在自己的项目中参考使用：
HTML
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ---------- ----- ---------------- ----------------- ------- ------ ---- ------------- ---------------------- ---- ------------- ----------------------- ---- ------------- --------------------- ------- -------
CSS
-- -------------------- ---- ------- ------- - ----------- ---------------- ---------- - --------------- - ------ ----- ------- ----- -------------------- - -- - ---------------- - ------ ----- ------- ----- -------------------- - ------ - -------------- - ------ ----- ------- ----- -------------------- - ------ -
Node.js
-- -------------------- ---- -------
----- ------ - ---------------------
---------------
---- ----------------------
---- -----
----- ------
------ ----------
---------- --
------ --
---- --
-- -
------ --
---- ---
--
---总结
使用 sprity-gm 可以帮助前端开发人员更快地生成雪碧图，从而提高页面性能。虽然 sprity-gm 目前还处于较为初步的阶段，并且有些使用上的不便之处，但是相信随着作者们不断地开发和完善，这个工具将具有更加强大和实用的功能，对我们的日常开发工作会有更大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111f000