前言

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

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

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

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

实现

关键点

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

其他需要

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

遍历 AST 树

功能

  • 遍历所有对象节点，包括数组
  • 提供 enter 和 leave 调用
  • 基本数据类型不需要查看
  • 对象执行 enter 和 leave
    • next：没什么用
    • skip：不检查当前 node 的子节点
    • stop：停止遍历
    • remove：移除当前 node
  • 基本数据不做处理
  • 数组需要遍历，递归每个对象