Peaches 是一个自动生成 CSS Sprite 背景图片的工具。使用 Peaches 还能帮我们定位背景图片，压缩 CSS 文件，减少网页的图片请求数。
为什么要使用 Peaches
作为一个 CSSer，其实已经厌烦了在 Photoshop 中拼图，在 CSS 中定位背景图片的位置。假如需求变更的时候，视觉设计师改了图片，还得重新把这个背景图片整理一下，再调整图片位置。如此重复劳动。
比较在意的是，在一个页面，N 张背景图片中有相同的元素。例如一个页面的不同组件中多处引入同一个按钮的背景图片，这时候就会很纠结。因为每个组件的作者可能都没意识到。而作为页面仔，拿来主义的组件又不能很好为页面服务，咋办？
这个时候，就需要 Peaches，因为我们追求简单、自然的CSS书写方式。
使用 Peaches 的好处
自动生成 Sprite 背景图片
- Peaches 将检索 CSS 中background-image，自动合并生成 Sprite、并更新元素对应的background-position压缩 CSS 样式
- Peaches 压缩您需要的 CSS 文件，让文件体积更小
- 不需要为图片的变化而烦恼
- 组件的引入更加合理，坚持一个 CSS 样式表只有 1 张背景图片
一张图说明 Peaches 的原理
图片来自 Peaches 官网，挺简洁明了的：
快速使用
1. mac下安装方法
使用npm一键安装：
npm install peaches -g 安装完后，应该可以在命令行中执行一下命令：
peaches --version 如果报command not found的错误，那么需要检查一下$PATH配置, 请在 ~/.bash_profile 中配置
export PATH="/usr/local/share/npm/bin/:$PATH" 配置完成之后，记得使用source ~/.bash_profile 来激活刚才的配置。
注：更多环境下的安装方法请看这里
2. 书写页面的 CSS
使用 Peaches 的一个明确的目的就是要合并背景图片，假如你的样式表中没有背景图片，请 Pass。反之，我们需要按照一定的约定来书写我们的样式表：
遇到有背景图片的时候，给出 background-image，就单纯的背景图片地址，不需要其他元素。 如果有确定的宽度和高度，则定义好，没有就定义为width : auto; height: auto; 配置好package.json，指定要编译的样式文件，生成的图片地址和样式地址。 注：配置 package.json 的更多参数，请看这里
3. 运行 Peaches
完成好编辑之后，在样式目录执行：
peaches
Ok，完成咯。
一些使用心得
Peaches 的存在和不断地更新，是为了更好地写 CSS。在性能优化上有很好的支持作用。在做支付宝首页的优化时，第一次使用了 Peaches 对一些背景图片进行合并。页面请求数从原先的 28 个减少到 12 个。在保证视觉效果和兼容性的前提上，使用 Peaches 能够帮我减少很大工作量，不需要再为拼图而烦恼了。
恩，感谢 Peaches 的作者@蔡伦同学为我们提供这么好的工具。加油！
注：如果您也在使用 Peaches，遇到啥问题，可以直接找我们！
