当我们在前端开发中需要制作大量小图标、按钮等时，使用多个小图片会极大地增加页面的请求量，导致页面变慢。因此，将小图标合并成一张雪碧图可以有效减少请求，提高页面响应速度。今天我们介绍的 npm 包 gulp-css-spritesmith-lothar，可以方便地将小图片转换成雪碧图。
安装 gulp-css-spritesmith-lothar
在使用之前，我们需要先安装 gulp-css-spritesmith-lothar，并将它添加到我们的项目中。我们可以通过以下命令行安装：
npm install gulp-css-spritesmith-lothar --save-dev
（注意：我们需要先在项目中安装 gulp 才能使用 gulp-css-spritesmith-lothar）
使用 gulp-css-spritesmith-lothar
首先，在项目中新建一个空的 CSS 文件，例如 sprite.css，在其中写入要合并成雪碧图的小图片的样式：
------ -
-------- -------------
------ -----
------- -----
----------------- ---------------------------
-
------ -
-------- -------------
------ -----
------- -----
----------------- ---------------------------
-
------ -
-------- -------------
------ -----
------- -----
----------------- ---------------------------
-然后，在 gulpfile.js 中使用 gulp-css-spritesmith-lothar 进行配置：
--- ---- - ----------------
--- ----------- - ---------------------------------------
------------------- -------- -- -
-------------------------- -- ---------- ------------
-------------------
-- ------ -------
---------------- --------------------
-------------- ----------------
-------- -------------
-------- -------------
-- ----------
-------- -
----------- ---------
------- ------------
-
---
--------------------------
---上面的代码中，我们使用 gulp-css-spritesmith-lothar 对 sprite.css 进行处理，其中 retinaSrcFilter 属性用于处理 Retina 屏幕下的雪碧图，其他属性的含义如下：
- retinaImgName：生成的 Retina 屏幕下雪碧图的文件名
- imgName：生成的普通屏幕下雪碧图的文件名
- cssName：生成的 CSS 文件名
- cssOpts.cssClass：样式中选择器的前缀
- cssOpts.path：图片路径的前缀
处理完成后，我们就可以得到生成的雪碧图 sprite.png 和 CSS 样式文件 sprite.css。在项目中引入 sprite.css，然后在 HTML 文档中使用类名 .icons 中的对应样式即可使用雪碧图。
示例代码
HTML 代码：
--------- -----
----- -------------
------
----- ----------------
-----------------
----- ---------------- -----------------------
-------
------
-----
----- ------------ --------------
----- ------------ --------------
----- ------------ --------------
------
-------
-------CSS 代码：
------ -
-------- -------------
------ -----
------- -----
----------------- ---------------------------
-
------ -
-------- -------------
------ -----
------- -----
----------------- ---------------------------
-
------ -
-------- -------------
------ -----
------- -----
----------------- ---------------------------
-结语
gulp-css-spritesmith-lothar 简单易用，可以帮助我们快速生成雪碧图，减少请求量，提高页面性能。它的核心功能十分实用，值得前端开发者学习和使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055be381e8991b448d98cb