概述
ppalka-sprity 是一个基于 Node.js 和 Spritesmith 实现的自动化雪碧图生成工具，可以帮助前端开发者自动将多张小图片合并成一张大图片，以及生成对应的 css 样式表。这个工具可以有效地减小页面加载时间，优化用户体验。
安装
首先，需要在电脑上安装 Node.js 和 npm，如果还没有安装，可以到 Node.js 官网 下载安装。
安装完成 Node.js 和 npm 后，在终端（或命令行）中运行以下命令，安装 ppalka-sprity：
npm install -g ppalka-sprity
使用
生成雪碧图
ppalka-sprity 可以自动将多张小图片合并成一张大图片，以便在页面中一次性加载。使用 ppalka-sprity 生成雪碧图非常简单，只需要指定小图片所在的目录，以及生成的雪碧图和样式表的输出目录，即可自动生成雪碧图和对应的样式表。
以下示例假设所有小图片都存放在 ./src/images 目录下，另外还创建了 ./dist/images 和 ./dist/css 两个目录用来存放生成的雪碧图和样式表。
cd /path/to/project ppalka-sprity ./src/images --out ./dist/images --css ./dist/css/sprites.css
运行以上命令后，ppalka-sprity 会自动将 ./src/images 目录下的所有小图片、以及生成的雪碧图和样式表输出到对应的目录中。
使用雪碧图
在生成了雪碧图和样式表后，我们就可以在页面中使用它们了。
首先，在页面头部引入样式表：
<head> <link rel="stylesheet" href="./dist/css/sprites.css"> <!-- ... --> </head>
然后，在页面中使用雪碧图。假设我们生成了名为 sprites.png 的雪碧图，其中包含了三张小图片，它们的名称分别为 icon-one.png、icon-two.png 和 icon-three.png，我们可以按照以下方式使用雪碧图中的其中一张小图片：
<div class="icon-one"></div>
其中，.icon-one 是在样式表中定义的一个类，它使用 background-image 和 background-position 属性来指定使用雪碧图中的哪一张小图片。样式表中的相应定义如下：
.icon-one {
background-image: url('../images/sprites.png');
background-position: 0 0;
width: 20px;
height: 20px;
}这里我们使用 background-position 来指定使用雪碧图中的第一张小图片。
类似地，我们可以按照这种方式使用其他小图片。
高级用法
ppalka-sprity 还提供了一些高级用法，可以帮助我们更加灵活地控制生成的雪碧图和样式表，以及对输出的文件进行后处理等。
以下是一些常用的高级用法：
指定雪碧图样式
ppalka-sprity 默认使用 CSS3 的 background-image 和 background-position 属性来使用雪碧图，但也支持使用 CSS2 的 background 属性和 img 标签来使用雪碧图。
如果希望使用 background 属性，可以使用 --style=old 选项，如下：
ppalka-sprity ./src/images --out ./dist/images --css ./dist/css/sprites.css --style=old
如果希望使用 img 标签，可以使用 --style=img 选项，如下：
ppalka-sprity ./src/images --out ./dist/images --css ./dist/css/sprites.css --style=img
指定雪碧图生成算法
ppalka-sprity 默认使用 binary-tree 算法来生成雪碧图，但也支持使用其他算法。可以使用 --algorithm 选项来指定使用哪种算法。
如下是 ppalka-sprity 支持的算法类型：
top-downleft-rightdiagonalalt-diagonalbinary-tree
使用示例：
ppalka-sprity ./src/images --out ./dist/images --css ./dist/css/sprites.css --algorithm=top-down
指定样式表模板
ppalka-sprity 使用默认的样式表模板来生成样式表，但也支持使用自定义的样式表模板。可以使用 --template 选项来指定使用哪个模板文件。
例如，我们可以创建一个名为 mytemplate.mustache 的样式表模板文件，如下：
-- -------------------- ---- ------- ------------ --------- - -------- ------------- ----------------- ------------------------- -------------------- ----------------- ------------------ ------ --------------- ------- ---------------- - ------------
然后在生成雪碧图时使用该模板文件：
ppalka-sprity ./src/images --out ./dist/images --css ./dist/css/sprites.css --template ./mytemplate.mustache
当然，我们也可以根据自己的需要创建其他样式表模板文件。
指定后处理器
ppalka-sprity 默认使用无后处理器，但也支持使用自定义的后处理器。可以使用 --processor 选项来指定使用哪个后处理器。
ppalka-sprity 目前支持以下后处理器：
spritemith-timestamp：在雪碧图文件名后追加时间戳。spritemith-datauri：将雪碧图转换为数据 URI，并将样式表中的url属性替换为对应的数据 URI。spritemith-base64：将雪碧图转换为 base64 编码，并将样式表中的url属性替换为对应的 base64 编码。
例如，我们可以使用 spritemith-timestamp 后处理器，在生成雪碧图时将时间戳添加到文件名后：
ppalka-sprity ./src/images --out ./dist/images --css ./dist/css/sprites.css --processor=spritemith-timestamp
这样生成的雪碧图文件名会在后面添加时间戳，例如 sprites_1626646335849.png。
结语
ppalka-sprity 是一个非常方便实用的自动化雪碧图生成工具，可以极大地提高前端开发效率，优化用户体验。希望本文对大家有所帮助，有更多的人体验到它的便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d781e8991b448e031d