简介
Spritezero 是一个轻量级的 NPM 包，用于将多个小图片合并成一个大的 sprite 图片，并且提供对应的 CSS 样式。它非常适合用于前端开发中，减少 HTTP 请求，提高网站页面加载速度。
安装
# 使用 NPM 安装 npm install spritezero --save-dev
上述命令会将 Spritezero 安装到你的项目中，并且将其添加到 devDependencies 中。
使用方法
在项目中创建一个文件夹
assets/sprites，用于存放需要合成的小图片。将需要合并的图片都添加到
assets/sprites目录下。在命令行中进入项目根目录，运行下面的命令。
# 运行 spritezero 命令合并小图片 npx spritezero assets/sprites output-directory
其中 assets/sprites 是需要合成的小图片所在的目录，output-directory 是合成后的 sprite 图片将要输出的目录。
- 在你的 HTML 文件中引入这个 sprite 图片，并且将 CSS 样式表链接到你的页面。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----------
----- ---------------- ------------------
-------
------
---- ------------- ---------------------
---- ------------- ---------------------
---- ------------- ---------------------
---
------- ----------------------
-------
-------在代码中，sprite.css 是由 Spritezero 生成的包含 CSS 样式规则的 CSS 文件，app.js 是你自己编写的 JavaScript 代码。
- 在你的 CSS 文件中使用
background-position属性，将 sprite 图片作为背景图，并将小图片对应的 CSS 类名添加到对应的 HTML 元素上。
-- -------------------- ---- ------- ------- - ----------------- ----------------- ------------------ ---------- -------- ------------- - -------------- - ------ ----- ------- ----- -------------------- - -- - -------------- - ------ ----- ------- ----- -------------------- ----- -- - -------------- - ------ ----- ------- ----- -------------------- ----- -- -
在代码中，sprites.png 是由 Spritezero 生成的合成后的 sprite 图片，sprite-image1、sprite-image2 和 sprite-image3 是小图片对应的 CSS 类名。
示例代码
下面是一个使用 Spritezero 的示例代码，其中包含三个小图片 image1.png、image2.png 和 image3.png，合成后输出到 build 目录中，并且提供对应的 CSS 样式表 build/sprite.css。
HTML
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----------
----- ---------------- ------------------------
-------
------
---- ------------- ---------------------
---- ------------- ---------------------
---- ------------- ---------------------
---
------- ----------------------
-------
-------CSS
-- -------------------- ---- ------- ------- - ----------------- ----------------------- ------------------ ---------- -------- ------------- - -------------- - ------ ----- ------- ----- -------------------- - -- - -------------- - ------ ----- ------- ----- -------------------- ----- -- - -------------- - ------ ----- ------- ----- -------------------- ----- -- -
JavaScript
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -- - --------------
----- ---- - ----------------
----- ---------- - -----------------
----- --------- - --------
----- ---------- - ----------
-- -------
----- ----- - ---
--------------------------------------- -- -
----- -------- - ------------------------ -----
----- ---- - ---------------------
-- --------------- -
--------------------
-
---
-- -- ------ ------ --- ----
--------------------------- ---- ----- -- ----- ----- -- -
----- - ------ ------ - - -----
-------------------------------------------------- -------
--------------------------------------------------- ------------------------
------------------------------------------- -------------------------------- ---------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709c8ccae46eb111efcd