使用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

你可能感兴趣的:(前端工具)