前言
在前端开发中，优化图片是一个非常重要的环节，可以显著提高网页的加载速度。而雪碧图是其中一种被广泛采用的优化方式，将多个小图片合并成一张大图片，在页面加载时再通过 CSS 裁剪达到优化的目的。
本文将介绍如何使用 npm 包 springbokjs-stylus-sprites 来生成雪碧图，并通过编写 stylus 代码来自动化地调用。
安装
使用 npm 安装 springbokjs-stylus-sprites：
npm install springbokjs-stylus-sprites --save-dev
安装完成后，我们还需要安装一个前置依赖：
npm install sprite-generator --save-dev
配置
在项目根目录下建立一个 sprites 目录，用来存放需要合并的小图片。
在 sprites 目录下，再新建一个子目录，例如 icons，用来存放需要生成雪碧图的图片。这里我们用一张示例图片和其对应的 @2x 以作演示：
- sprites/
- icons/
- close.png
- close@2x.png
- icons/
在项目根目录下，新建一个 CSS 目录，用来存放 stylus 相关文件。在 CSS 目录下，新建一个 mixins.styl 文件，用来编写调用代码。
在 mixins.styl 文件中，先定义一个变量，用来指示生成的雪碧图的路径：
$icons-sprite-url = './sprites/icons-sprite.png'
接下来，我们通过调用 springbokjs-stylus-sprites 提供的一个 mix 关键字来实现雪碧图的生成。其中，第一个参数 $icons-sprite-url 指示了生成的雪碧图保存的位置，第二个参数则是需要合并的图片的路径：
.icons-sprite mix($icons-sprite-url, './sprites/icons/*')
最终，mixins.styl 的代码如下：
$icons-sprite-url = './sprites/icons-sprite.png' .icons-sprite mix($icons-sprite-url, './sprites/icons/*')
调用
在需要使用雪碧图的 stylus 文件中，通过引用 mixins.styl 来调用：
@import '../mixins'
.close
width 50px
height 50px
background-image url($icons-sprite-url)
background-position -(spr('close.png')['x'])px -(spr('close.png')['y'])px在上面的代码中，我们通过调用 mixins.styl 中定义的 $icons-sprite-url 来作为 background-image 属性的值，同时通过调用 spr 辅助函数来获取合适的背景定位位置。
为了便于理解，这里逐行解释代码：
-- -------------------- ---- ------- ------- ----------- -- -- ----------- ------ ----- ---- ------ ---- -- -- ------ --- ---------------- ---------------------- -- -- ----------------- -- ---------------- -- ------------------- -------------------------- -------------------------- -- ---- --- -------------
至此，我们就成功地实现了雪碧图的生成和调用，为页面的图像优化提供了协助。
总结
本文介绍了 npm 包 springbokjs-stylus-sprites 的使用，详细地讲解了其配置和调用的过程，并提供了示例代码加深读者的理解。雪碧图是前端开发优化图片加载速度的一个重要手段，使用 springbokjs-stylus-sprites 可以帮助我们轻松地生成和调用雪碧图，提高页面性能，减少网页加载时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75922