在前端开发中，我们通常需要将多张图片合成一张雪碧图（sprite）。常见的应用场景包括图标、背景图片、按钮等等。使用雪碧图可以减少请求次数，提升网页性能。但是手动合并雪碧图是一件费时费力的事情，这时候可以使用 spritestream，一个方便快捷的 npm 包，来帮助我们自动生成雪碧图。
安装 spritestream
npm install spritestream --save-dev
使用 spritestream
1. 创建一个 CSS 文件
在项目中创建一个 CSS 文件，用于存放生成的雪碧图的样式。
.sprite {
background-image: url(sprite.png);
background-size: 500px;
}2. 使用 spritestream
在任务（task）中使用 spritestream，将需要合并的图片从流（stream）传入，将生成的图片和样式放入指定目录中。
-- -------------------- ---- -------
--- ---- - ----------------
--- ----------- - ----------------------------
--- ------------ - ------------------------
-------------------- -------- -- -
--- ---------- - ----------------------------
-------------------
-------- -------------
-------- -------------
------------ -------- ------ -
------ -------------------------------
-
----
-----------------------------------------------
--------------------------------------------
---3. 在 HTML 文件中使用
在 HTML 文件中引入生成的样式文件，然后在需要使用雪碧图的地方使用类名“sprite”。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
----- ---------------- ----------------------
-------
----- -
------ ------
------- ------
-------- -------------
-
--------
-------
------
---- ----------- ------- --------------------------- --- ------------
---- ----------- ------- --------------------------- ------ ------------
---- ----------- ------- --------------------------- ------ ------------
-------
-------总结
使用 spritestream 可以很方便地将多张图片合并为雪碧图，同时自动生成样式，减少手动操作，提高生产效率。使用方法也非常简单，只需要在任务中设置一下配置，就可以轻松生成雪碧图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111efe3