精灵图思路笔记

精灵图小工具提纲

一、背景

随着产品的不断迭代更新，项目发展的越来越大，页面渲染的图片不断增多，客户端每需要访问一张图片都会向服务器发送请求，访问的图片数量越多，向服务器发送的请求次数越多，造成延迟的可能性越大，图片加载失败的次数也可能越多。

二、目的

我们的宗旨是从合成到使用精灵图实现自动化编译，而在开发环境中开发者不需要了解精灵图是什么，只需要通过一些简单的配置便可以自动完成整个过程。

三、相关技术

• 储备知识：gulp、node、正则

四、总体流程及实现思路

（一）总体流程/问题

其实总体的过程不过是合成精灵图->使用精灵图

从合成精灵图开始，我们需要考虑下面这些问题：

• 哪些图片应该拼成精灵图？
• 怎么合成精灵图？
• 拿到精灵图的文件后我们要怎么处理？

假设我们已经拿到精灵图了，到了使用精灵图这一步，这里需要考虑的问题有：

• 普通图片和精灵图的使用有什么不同？
• 如何提高工具可复用性？

（二）实现思路

基于以上这些问题，我们一步步去探讨：

1.如何选择拼成精灵图的图片？

• 思考：在考虑此问题前我们得先了解一下精灵图的定义，所谓精灵图就是把很多的小图片合并到一张较大的图片里，精灵图也是常见的小图片加载优化手段。一般我们都是选择项目中的图标去合成精灵图，这些图标图片的特点就是小。

• 实现：选出这些符合小图标特征的图片，集中存放到一个文件夹中，方便后面使用。

2.合成精灵图

• 思考：这里我们可以选择把这些小图标丢给设计，从设计那里拿到一张精灵图，然后我们再用ps拉标尺一个个去测量每个图标的位置，这无疑是最简单的方法。但是，如果我们迭代更新的时候需要用到新图标呢，那我们每次都要跟设计要新图，再重新测量更换？很明显，这方法不仅麻烦，而且与我们开发这个工具的宗旨并不符，还影响了开发者的效率。

• 实现：使用gulp.spritesmith合成精灵图并自动输出样式文件

3.处理合成精灵图任务输出文件

• 思考：小程序图片资源压缩率有限，一般我们的静态资源需要上传到cdn，控制代码包大小，这点无需过多解释，在拿到精灵图时，我们需要将它放到cdn上去，上传图片作为此工具执行的其中一个流程，自然排除手动上传的方法。

• 实现：使用ali-oss通过put接口将生成的精灵图上传到oss，样式文件保留在原本指定的位置

4.精灵图的使用

• 思考：普通图片和精灵图使用的方式有很大的差别，普通图片就是正常的image标签，精灵图通常是作为背景图来使用。

• 实现：找到需要处理的image标签替换成使用精灵图并引入样式文件。

• 注意：需要考虑多种情况，比如正则匹配image标签时，要考虑怎么才能匹配到所有的image

5.配置

• 我们期望这个工具不止是能在一个项目中使用，它也可以适用于其他项目，不过有一些数据不一样罢了，只要把过程中用到的一些数据改成其他项目对应的即可。基于我们的宗旨，我们不能要求开发者在其它项目中使用的时候还需要找源码去更改数据。

• 实现：抽取公共配置