拼sprite一直是一个让人头疼的问题。前两年一直是自己手动拼的,后来觉得这样效率太低了,就改用了compass来自动生成。但是为了拼sprite就使用compass这么重量的框架很不现实,而且现在团队使用的都是less而不是sass。
后来终于发现一个非常简单易用并且功能也足够强大的自动sprite工具 glue。
1,把单个的icon文件合并压缩成一个大文件,并自动生成css。
2,直接pip安装,一个命令就可以自动压缩,简单明了
3,强大的自定义配置,可以把配置保存成配置文件。可配置的选项包括class名,css模板,icon的margin和padding,png8等等
4,对retina图片的支持。
如果你正在用的工具不够简单强大,赶紧换成glue吧。
下面说说基本使用过程,当然这个在官网上的更详细 http://glue.readthedocs.org/en/latest/ 。
执行两个命令即可:
brew install jpeg
pip install glue
windows和linux平台的参见官方文档
--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就可以了
很简单,只要把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
文件名是对于单个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
具体的配置选项可以参考官方文档。
这样会把icon下的图片当做retina图片,然后缩小之后当做普通图片,最后生成三个文件: icon.css icon.png icon@2x.png。
也就是说,如果使用retina,那么你只需要提供一份retina图片,glue会自动帮你缩放。
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
后来终于发现一个非常简单易用并且功能也足够强大的自动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 icon@2x.png。
也就是说,如果使用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