在前端开发中，构建 CSS Sprite 是一个必备的技能。因为通过 Sprite 技术可以有效减少页面请求次数，加快加载速度，提高网站性能。Sprity 是一个基于 Node.js 的 CSS Sprite 工具，可以自动化生成雪碧图，非常方便实用。本文将详细介绍如何使用 Sprity 这一 NPM 包生成 CSS Sprite。
安装
在开始使用 Sprity 之前，你需要先安装 Node.js 和 Sprity。如果你已经安装了 Node.js，那么可以通过以下命令安装 Sprity。
npm install sprity --save-dev
生成雪碧图
在使用 Sprity 生成雪碧图时，你需要确定以下三个参数：源文件目录，目标文件目录和生成的雪碧图名称。
我们以一个示例项目为例，进行 Sprity 的使用。
-- -------------------- ---- ------- --- ---------- --- ----------- - --- ---------- -- --- ------ ---- - --- ---------- -- --- ------ --- --- ------ - --- --------- - --- --------- - --- --------- --- -------------展开代码
在这个示例项目中，我们需要将 images 目录下的图标合成为一张雪碧图，然后在样式表中引用这个雪碧图。
首先，我们在项目根目录下创建一个名为 sprite 的目录，并在其中创建一个名为 spritesmith.css 的文件。这个文件是生成的样式表，其中包含了随着雪碧图生成的 CSS 样式。
接下来，在项目根目录下打开终端，输入以下命令：
$ sprity create images/**/*.{png,jpg,jpeg} --style sprite/spritesmith.css --i sprite.png
这条命令会将 images 目录下的所有 png、jpg 和 jpeg 图片合成为一张雪碧图，并生成名为 spritesmith.css 的样式表和一个名为 sprite.png 的雪碧图。这个雪碧图和样式表都被保存在 sprite 目录中。
在生成的样式表中，Sprity 使用的是 background-image 属性来设置背景图片。
.selector { background-image: url('sprite.png'); background-position: x-position y-position; width: width; height: height; }
其中，selector 为需要设置背景图片的元素选择器；background-image 属性设置的是雪碧图的路径；background-position 属性设置的是该背景图片在雪碧图中的位置；width 和 height 属性设置的是该元素的宽度和高度。
发布 npm 包
如果你希望将自己开发的库发布到 npm 社区中，你需要首先注册一个 npm 账号，然后使用以下命令进行登录：
npm login接下来，通过以下命令将要发布的包文件上传到 npm 中：
npm publish注意：在上传过程中，如果出现错误，你需要先更新版本号，然后再次上传，直到上传成功。
总结
通过使用 Sprity，我们可以快速、便捷地生成 CSS Sprite，并能够通过发布 npm 包的方式分享自己开发的工具库，同时也提高了我们的编程效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111efe2
