使用glue自动生成sprite

拼sprite一直是一个让人头疼的问题。前两年一直是自己手动拼的，后来觉得这样效率太低了，就改用了compass来自动生成。但是为了拼sprite就使用compass这么重量的框架很不现实，而且现在团队使用的都是less而不是sass。
后来终于发现一个非常简单易用并且功能也足够强大的自动sprite工具 glue。

官网地址在这里：https://github.com/jorgebastida/glue。

glue的功能

这个工具有如下几个功能，基本覆盖了我的所有需求：
1，把单个的icon文件合并压缩成一个大文件，并自动生成css。
2，直接pip安装，一个命令就可以自动压缩，简单明了
3，强大的自定义配置，可以把配置保存成配置文件。可配置的选项包括class名，css模板，icon的margin和padding，png8等等
4，对retina图片的支持。
如果你正在用的工具不够简单强大，赶紧换成glue吧。
下面说说基本使用过程，当然这个在官网上的更详细  http://glue.readthedocs.org/en/latest/  。

1，安装glue：

只说mac平台上的安装方法。
执行两个命令即可：
brew install jpeg
pip install glue
windows和linux平台的参见官方文档

2，自动生成sprite

假设你的文件结构如下：
--app\
    --icon\
        --close.png
        --question.png
        --right.png
然后进入app目录，并执行命令 glue icon css。这行命令的意思是，从icon中读取图片和配置，并生成css和sprite文件保存到css目录下。然后文件结构就会变成这样：
--app\
    --icon\
        --close.png
        --question.png
        --right.png
    --css\
        --icon.css
        --icon.png
然后就可以直接使用icon.css中的class了，icon.css的内容如下：
/* glue: 0.3 hash: f5a94ec16e */
.icon-date-picker,
.icon-toggle,
.icon-toggle-down,
.icon-right,
.icon-activity,
.icon-edit,
.icon-close{background-image:url('icon.png');background-repeat:no-repeat}
.icon-date-picker{background-position:0px 0px;width:20px;height:15px;}
.icon-toggle{background-position:0px -15px;width:18px;height:18px;}
.icon-toggle-down{background-position:-20px 0px;width:18px;height:18px;}
.icon-right{background-position:-38px 0px;width:18px;height:16px;}
.icon-activity{background-position:-38px -16px;width:16px;height:16px;}
.icon-edit{background-position:-20px -18px;width:13px;height:13px;}
.icon-close{background-position:0px -33px;width:9px;height:9px;}

以后如果icon有变化，直接执行glue icon css就可以了

3，生成多个sprite文件

如果你的icon比较多，想生成多个sprite怎么办？
很简单，只要把icon按不同的文件夹组织，比如这样：
images
├── actions
│   ├── add.png
│   └── remove.png
├── borders
│   ├── top_left.png
│   └── top_right.png
└── icons
    ├── comment.png
    ├── new.png 
然后使用 --project参数，就会对其中每一个文件夹生成一个对应的sprite。
sprites
    ├── actions.png
    ├── actions.css
    ├── borders.png
    ├── borders.css
    ├── icons.png 
    └── icons.css

4，自定义配置

有两种方式可以自定义配置，通过文件名或者sprite.conf配置文件。
文件名是对于单个icon的配置，只有两种参数
一个是padding，比如想给某一个icon增加10px的padding，那么直接命名成这样 xxx_10.png即可。
另一个是伪类，比如给一个btn增加hover状态的图片只需要这样命名 btn_hover.png。
除了上面说的，其他的配置都是在sprite.conf文件中完成。配置文件放在icon目录下即可，如果icon目录有子目录，可以在子目录中也增加配置文件，每个配置文件对当前目录生效，比如这样：

images
    ├── actions
    │   ├── add.png
    │   ├── remove.png
    │   └── sprite.conf
    └── icons
    │   ├── comment.png
    │   ├── new.png
    │   └── rss.png 
    └── sprite.conf
具体的配置选项可以参考官方文档。

5， 处理retina

如果想处理retina图片，那么只需要增加--retina参数即可：glue icon css --retina
这样会把icon下的图片当做retina图片，然后缩小之后当做普通图片，最后生成三个文件： icon.css    icon.png    [email protected]。
也就是说，如果使用retina，那么你只需要提供一份retina图片，glue会自动帮你缩放。

glue还可以处理不同缩放比例的retina，默认的--retina是2x大小的。

6，集成到grunt

目前glue好像没有官方的grunt插件，但是自己注册一个任务是非常简单的，coffeescript代码如下：

grunt.registerTask 'glue', 'create sprite', ->
     done = this.async()
     child = exec 'cd assets && glue icon --less --css less --img sprite', (e)-> done() 

这里的exec后面的命令根据自己的需要修改。
如果在watch中加入glue任务，则可以做到把文件扔进目录中就可以直接使用classname