当我们在前端开发中需要制作大量小图标、按钮等时，使用多个小图片会极大地增加页面的请求量，导致页面变慢。因此，将小图标合并成一张雪碧图可以有效减少请求，提高页面响应速度。今天我们介绍的 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
