前言
前端开发中，我们经常会使用雪碧图（sprite），以减少HTTP请求的数量，提高网站的性能。如果你还在用手动合成雪碧图的方式，那么这篇文章可能会对你有所帮助。本文介绍一款npm包sprity-cli，它可以快速生成雪碧图，并支持自定义参数，使用非常方便。
安装
全局安装
使用以下命令可以全局安装sprity-cli：
npm install -g sprity-cli
本地安装
在本地项目目录下，可以使用以下命令安装sprity-cli：
npm install sprity-cli --save-dev
使用
命令行使用
在命令行下执行以下命令，可以生成雪碧图：
sprity source_folder target_file
其中，source_folder是要合成雪碧图的图片所在目录，target_file是生成的雪碧图的文件名。例如：
sprity images/ sprite.png
生成的雪碧图文件会存放在当前目录下，并以png格式保存。
配置参数
sprity-cli还支持自定义参数，以生成不同规格的雪碧图。以下是一些常用的参数：
--style=<css>：指定生成的CSS文件的格式，默认为CSS，还支持SCSS、LESS等格式。--margin=<value>：指定雪碧图中每个图片之间的间距，默认为0。--prefix=<prefix>：指定CSS中生成的类名前缀，默认为sprity-。--orientation=<horizontal|vertical>：指定雪碧图中图片排列的方向，默认为vertical。
例如：
sprity images/ sprite.png --style=scss --margin=10 --prefix=my- --orientation=horizontal
这条命令会生成一个水平排列、每个图片之间距离为10px、CSS类名前缀为my-的SCSS格式的雪碧图。
在gulp中使用
sprity-cli还可以与gulp配合使用。通过gulp插件gulp-sprity，可以更方便地生成雪碧图。
首先在gulp项目中安装gulp-sprity：
npm install gulp-sprity --save-dev
然后在gulpfile中使用：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------
------------------- -------- -- -
------ ---------------------------
--------------
-------- -------------
--------- --
---
-----------------------
---gulp-sprity会自动新建一个sprites目录，将生成的雪碧图和CSS文件放置在该目录下，默认以png和css的格式保存。可以使用option.imgName和option.cssName指定文件名。
总结
sprity-cli是一款非常方便的生成雪碧图的工具，可以快速生成不同格式、不同规格的雪碧图，支持命令行和gulp两种方式使用，使用起来非常方便。推荐给有雪碧图需求的前端开发人员使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111effa