前言
开发网页项目时，常常需要使用到精灵图来减小页面的请求次数，提升性能。但是手动拼接精灵图十分繁琐，且易出错。此时，就需要借助工具来完成这个过程。本文介绍了一个 npm 包 just-sprites，它可以自动化拼接精灵图，令开发者省去手动操作的烦恼。
什么是 just-sprites
just-sprites 是一个 npm 包，它可以根据图片目录下的图像文件，自动化生成精灵图并输出 CSS 文件，减少手动操作的复杂度。
安装
在命令行中输入以下命令，即可安装 just-sprites：
npm install just-sprites --save-dev
使用
构建精灵图
在构建精灵图之前，需要先把要用到的图像文件准备好，并将它们存放在一个目录下。
在代码中，引入 just-sprites 包，并实例化 justSprites 对象。将需要构建精灵图的图片目录作为参数传递给对象的构造函数。调用对象的 createSprite() 方法构建精灵图，如下所示：
const JustSprites = require('just-sprites');
const justSprites = new JustSprites('images');
justSprites.createSprite();createSprite() 方法支持以下可选参数：
padding：每个精灵图之间的间隔，默认值为 10。spriteDir：生成的精灵图文件存放的目录，默认值为 'images'。spriteCss：生成的 CSS 文件名，默认值为 'sprite.css'。style：CSS 的 class 或 id 样式，默认值为空，如有需要可传入。
引用CSS文件
生成的 CSS 文件默认存放在 'images' 目录中，可以如下所示链接到 HTML 页面：
<link rel="stylesheet" href="images/sprite.css">
使用精灵图
使用精灵图需要在 HTML 标签中设置 class 属性，并在 CSS 文件中设置相应的样式，如下所示：
<div class="sprite-logo"></div>
.sprite-logo {
width: 107px;
height: 107px;
background: url('./images/sprite.png') no-repeat;
background-position: -107px -107px;
}在样式表中，通过 background-position 来确定背景图片的位置，从而实现图像的切换。
示例代码
以下是一个完整的示例代码，用于构建精灵图并应用到 HTML 页面中：
-- -------------------- ---- ------- ----- ----------- - ------------------------ ----- ----------- - --- ---------------------- -------------------------- -------- --- ---------- ------------ ---------- ---------------------- ------ -------- --- ----- -- - -------------- ----- ---- - ---------------- ----- ------------- - -------------------- ----------------------- ----- ---------------- - ------------------------------ --------- ------------------------------
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
----- ---------------- ---------------------------
-------
----- -
-------- -------------
------ -----
------- -----
------------------ ----------
-
---------- -
-------------------- - --
-
---------- -
-------------------- ----- --
-
--------
-------
------
---- ----------- -----------------
---- ----------- -----------------
-------
-------总结
just-sprites 是一个方便实用的 npm 包，它可以自动化生成精灵图，令前端开发者省去手动拼接的麻烦。它支持多个可选的选项参数，并提供了丰富的样式操作，可以完全满足各种不同需求的使用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664581e8991b448e2583