前言
在前端的开发过程中，常常有需要将多个小图标合成成一张图的需求，以减少 HTTP 请求次数，从而提高页面性能。而 spritesmith-scss-retina-template 是一款基于 node.js 的 npm 包，能够快速将多张小图标合成一张图，并生成相应的 SCSS 样式文件，同时支持 Retina 屏幕。
本篇文章将介绍如何使用这一 npm 包，同时也会探讨一下其底层原理。相信通过本篇文章的学习，读者们可以更好地理解 Sprites 以及 Spritesmith-scss-retina-template 的使用方法，从而为页面性能提升做出贡献。
安装
首先，我们需要全局安装 spritesmith-scss-retina-template 的 npm 包。
npm install -g spritesmith-scss-retina-template
安装成功之后，我们就可以愉快地开始使用啦！
使用
首先，在你的项目中新建一个文件夹，名字随意，用于存放需要合成的小图标。本文使用的文件夹名为 icons。
在 icons 文件夹中，存放若干张小图标，格式随意，可以是 png、jpg、gif 等任何格式。本文使用的是 png 格式。
然后，我们打开终端，切换到 icons 文件夹所在的目录下，执行以下命令。
spritesmith-scss-retina-template -r *.* -o icon-sprite
其中，-r 参数表示需要合成的图片的通配符。例如，. 表示合成该文件夹下所有文件。-o 参数表示输出文件的名字。icon-sprite 表示将要生成 QIcon01.png、QIcon01@2x.png、icon-sprite.scss 等文件。
执行完之后，我们就可以看到生成了如下文件：
|-- QIcon01.png |-- QIcon01@2x.png |-- icon-sprite.png |-- icon-sprite@2x.png |-- icon-sprite.scss
其中，QIcon01.png 是我们存放到 icons 文件夹中的小图标文件，QIcon01@2x.png 则是对应的 retina 图片。
icon-sprite.png 和 icon-sprite@2x.png 则是将所有小图标合成后生成的大图，分别对应普通屏幕和 retina 屏幕。我们通常只需要用其中一个即可。icon-sprite.scss 则是生成的样式文件，我们只需要将其引入到项目中即可。
原理
在了解 spritesmith-scss-retina-template 的使用方法之前，我们需要先了解一下 Sprites 的原理。
Sprites，又叫 CSS Sprites，是一种将多张小图标合成一张大图的技术。这种技术的出现主要是为了解决 HTTP 请求次数过多而造成的网页响应速度缓慢的问题。
Sprites 最早是在网站导航菜单中出现的。我们可以将每个导航菜单项对应的小图标合成一张大图，并将其设置为整个导航菜单的背景。这样能够减少 HTTP 请求次数，从而提高网站响应速度。后来，这种技术被更广泛地运用到了网站的其他部分。
Retina 屏幕是指 PPI 更高的屏幕。Retina 屏幕的出现，为打包后的图标资源带来了新的问题。由于 Retina 屏幕的 PPI 值高于普通屏幕，因此需要高清分辨率的图片。如果将东西改成高清图片会导致打包后的资源放大约两倍，将大幅减少性能。因此，需要合理地利用 Sprites 技术，并在此基础上针对 Retina 屏幕制作优化。
spritesmith-scss-retina-template 正好解决了这个问题。本文中的例子中，通过命令行生成的两张合成后的大图，与其对应的 SCSS 样式文件（其中已经包含了 Retina 在内的多种屏幕的样式）。
示例代码
下面是本文中使用的执行 spritesmith-scss-retina-template 命令的示例代码。
spritesmith-scss-retina-template -r *.* -o icon-sprite
可以根据自己的需要进行修改。其中，-r 参数表示需要合成的图片的通配符。-o 参数表示输出文件的名字。执行该命令后即可在当前目录下生成对应的大图、SCSS 样式文件等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709c8ccae46eb111efca