什么是 sprity-js
sprity-js 是 npm 包中的一个工具，它可以将多张图片合成为一张雪碧图。雪碧图可以有效地减少页面请求数量和提高加载速度，特别是对于移动端的优化非常重要。
sprity-js 有多种使用方式，可以用于 Webpack 构建、Gulp 或者 Grunt 等构建工具中，也可以在命令行中使用。
安装
安装 sprity-js 只需在命令行中输入以下命令：
npm install sprity -g
这里的 -g 表示全局安装，如果只是局部安装可以去掉。
使用方法
在命令行中使用
使用命令行工具可以非常方便地将图片合成为雪碧图。假设您有需要合并的两张 png 图片 image1.png 和 image2.png，可以使用以下命令创建一个名为 sprite.png 的雪碧图：
sprity create ./images/*.png --name sprite --style css
这里的 create 命令表示创建雪碧图，./images/*.png 表示需要合并的图片路径，--name sprite 表示合成后的雪碧图名称为 sprite，--style css 表示自动生成 css 文件。
执行该命令后，在当前目录下会生成一个 sprite 文件夹，其中包含一个 sprite.png 的图片文件和一个 sprite.css 的样式文件。
在 Webpack 中使用
如果您正在使用 Webpack 进行开发，可以使用 sprity-loader 插件将图片合成为雪碧图。首先需要安装 sprity-loader：
npm install sprity-loader --save-dev
之后在 Webpack 的配置文件中引入 sprity-loader：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------------
---- -
-
------- ----------------
-------- - ------ ------------ -
-
-
-
-
-
-这里的 test 表示需要处理的图片类型为 .spr.png，loader 指定了使用 sprity-loader 进行处理，options 中的 style 属性指向了样式输出文件。
在你需要合并图片的地方，可以这样引入：
<div class="icon1"></div> <div class="icon2"></div>
-- -------------------- ---- ------- -- ---------- -- ------ - ----------------- ------------------ -------------------- - -- ------ ------ ------- ------ - ------ - ----------------- ------------------ -------------------- ------ -- ------ ------ ------- ------ -
在 Gulp 或 Grunt 中使用
如果您正在使用 Gulp 或 Grunt 构建工具进行开发，则可以在任务中引入 gulp-sprity 或 grunt-sprity 插件使用 sprity-js。
以 Gulp 为例，首先安装 gulp-sprity 插件：
npm install gulp-sprity --save-dev
之后在 Gulp 的任务中使用 gulp-sprity 插件：
-- -------------------- ---- -------
-------------------- -------- -- -
------ ------------
---- -----------------
----- ---------
------ ------------
--
--------------------- -------------------- --------------------
--------------------- --------------------
--这里的 src 表示需要合并的图片路径，name 表示合成后的雪碧图名称为 sprite，style 表示自动生成 css 文件。
执行该任务后，在当前目录下会生成一个 dist 文件夹，其中包含一个 sprite.png 的图片文件和一个 sprite.css 的样式文件。
总结
sprity-js 是一个非常实用的 npm 包，它可以帮助前端开发者轻松地将多张图片合成为一张雪碧图，以优化页面加载速度。该篇文章详细介绍了 sprity-js 的安装和使用方法，并提供了命令行、Webpack、Gulp 和 Grunt 四种不同的使用方式方便开发者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f03a