## 前言
大概有两种方法制作精灵图

1. 开发阶段，工具处理图片得到对应的`.icon-class`，再直接使用相应的 class、或者通过 css 预处理工具 mixin 即可。不具有入侵性
2. 构建阶段，工具处理 css 文件并在生成精灵图后将路径和大小替换回去，在原本 css 文件的基础上产出新的 css 文件

本工具主要基于方法 2 的思路实现，理由如下：

1. 希望开发人员能轻松通过标记合并特定的图片，而非配置文件。可方便维护和产出多个精灵图
2. 不依赖于 CSS 预处理工具，降低使用门槛（考虑到目前团队对预处理工具的不熟悉）
3. 开发阶段不需要过多去注意合并精灵图的事情


## 实现

### 关键点

- CSS 文件中提取出图片地址
- 根据图片地址，使用 spritemith 合并图片，并得到坐标
- 将 CSS 中的图片地址、大小替换为精灵图，并添加坐标

### 其他需要
- 提取颜色，区分十六进制和 rgb
- Base64 标记
- 自动生成图片大小，即常规精灵图工具的简化（todo）
- 多个 css 文件复用图片，需要支持数组
- @2x，通过 media 重写特定的背景样式

## 遍历 AST 树

### 功能

- 遍历所有对象节点，包括数组
- 提供 enter 和 leave 调用
- 基本数据类型不需要查看

--

- 对象执行 enter 和 leave
    - next：没什么用
    - skip：不检查当前 node 的子节点
    - stop：停止遍历
    - remove：移除当前 node
- 基本数据不做处理
- 数组需要遍历，递归每个对象

## 优化

- 是否可以替换位图引擎，比如基于 phantomjs 的 canvas
	- window 测试可行，需要 1.9.8
	- 如何调整 phantomjssmith 兼容到 phantomjs
	- 如何通过 phantomjs 缩小图片
	- phantomjs 速度太慢，osx 下处理一个合并6个小图的时间是4700ms， gm 为 100ms，pixel 为 400ms；windows 下处理6个小图的时间为 1100ms，gm 为 80ms，pixel 为 400ms（pixel 在 windows 下大概率出现噪点）
- 尝试 images 
	- <s>坑爹的 node-images</s>
	- 表现比较优秀，速度和质量，不依赖外部库
- 产出 .icon 方式，可以是另外的分支（支持 sass 等）
- 改用正则表达式？不用，不需要在意 sass