如果你正在构建一个前端项目并需要为你的网站加入精灵图，在这个过程中你需要制作你自己的标准和 retina 的精灵图。对于这个任务，你可以使用一个 npm 包叫做 spritesmith-stylus-retina-template。
在这篇文章中，我们将会为你提供如何使用 spritesmith-stylus-retina-template 的详细教程。
安装
- 打开终端，进入你的项目目录，输入以下命令：
npm install spritesmith-stylus-retina-template
- 如果你想使用 Gulp 这个构建工具，你可以添加一个 Gulp 插件：
npm install gulp.spritesmith
配置
在使用前，你需要配置一些基本信息。例如图片存储位置、输出路径和样式存储位置等。
-- -------------------- ---- -------
------- - -
---------------- ----------------------
-------- -------------
-------------- ----------------
-------- --------------
---------- -----------
------------ --------------------------------------------------------------------------------
-------- ---
--使用
-- -------------------- ---- -------
--- ---- - ----------------
----------- - ----------------------------
------------------- -------- -- -
--- ---------- - ----------------------------
----------------------------
-----------------------------------------------
-----------------------------------------------
------ -----------
---在这个例子里，我们使用了 Gulp 构建流程。首先，我们输入我们的图片源文件，然后把它们合并成一个精灵图并作如下处理：
把所有的 @2x.png 图片去掉后缀后，重新命名为 sprite@2x.png，并且保存在第二个图片路径位置。
把恰好对应的在图片路径中没有 @2x.png 后缀的低分辨率图片命名为 sprite.png。
把所有的 sprite 节点保存在 sprite.styl 的 stylus 文件中。
不需要担心分辨率适应问题，因为 spritesmith-stylus-retina-template 可以处理 @media 语句和重新命名路径，使得你的精灵图会根据你的浏览器尺寸自适应调整。
结论
只需要经过上述简单设置步骤，你就可以轻易地为你的项目添加一个精灵图了。
此时，你可以把对应的 classes 直接加到 HTML 的标签上，并且特别说明的是，spritesmith-stylus-retina-template 可以自动的添加 @media 语句。
添加含有你的 classes 的 class 对象，就可以使用你的精灵图了。
<div class="my-sprite">This will have a background image!</div>
以上就是 spriteSmith 的基本用法, spritesmith-stylus-retina-template 只是在这个基础上加了一些 stylus 模板，让你更加的方便和自如地完成你的自定义样式。
谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709c8ccae46eb111efcc