在前端开发中，精灵图是一个常见的优化方式，可以减少 HTTP 请求数量，提高页面的性能。而在精灵图制作的过程中，使用 sprites.js 可以极大地简化这个过程。
简介
sprites.js 是一个 JavaScript 库，可以帮助我们自动生成 CSS 和图片，它支持多种布局算法，具有不错的灵活性。使用 sprites.js 可以避免精灵表的手动拼接，可以自动处理图片的透明度。
安装
sprites.js 以一个 npm 包发布，可以通过 npm 安装它：
npm install spritesjs
使用
示例代码
-- -------------------- ---- -------
----- ------- - ---------------------
----- -- - --------------
----- ----- - ---------------------------
----- ------ - ---
------------------ -- -
-------------
----- -------------------
----- -----
---
---
----------------------
------- -------
-- ----- ------- -- -
-- ------ -
-------------------------------- ------------
-------------------------------- --------------
-------------------- -------------
- ---- -
-------------------
-
---解析
首先，我们需要引入 spritesjs 库和 fs 模块。接着我们需要从文件夹中读取图片，将它们存入一个数组中。spritesjs 库提供了 createLayout 方法用于排版，我们将读取到的图片数组作为参数传入该方法中，并指定输出文件的路径和文件名。
生成的内容
执行该脚本后，我们将得到一个 CSS 文件和一个图片文件。其中，CSS 文件定义了每一个图片在精灵表中的位置和大小，图片文件则是精灵表的实际内容。我们只需要在 HTML 中引入该 CSS 文件，然后使用 CSS 中定义的类名即可⋯⋯
效果
以下是一个简单的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
----- ---------------- --------------------
-------
------
---- ----------------------
-------
-------.my-icon {
background: url('./output.png');
background-position: -10px -20px;
width: 32px;
height: 32px;
}打开 HTML 文件，我们将会看到输出的精灵图在页面上。
总结
sprites.js 是一个非常优秀的 npm 包，可以帮助我们快速制作精灵图，减少页面的 HTTP 请求数量，提高页面性能。在使用它的时候，需要注意一些尺寸和排版的问题。我们可以结合 CSS 类名的命名规范，提高代码的可维护性，减少工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e040c