使用glue自动生成sprite
来源:互联网 发布:人体解剖软件中文版 编辑:程序博客网 时间:2024/05/13 02:19
拼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
- 使用glue自动生成sprite
- 使用compass自动拼css sprite
- 随机生成Sprite
- ispriter自动构建css-sprite
- css sprite是什么?如何使用css sprite
- 推荐使用CSS Sprite
- Flex中使用Sprite
- CSS Sprite使用整理
- CSS Sprite的使用
- CSS如何使用sprite
- Lua之Sprite使用
- 在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
- 在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
- 使用eclipse自动生成注释
- 使用automake自动生成Makefile
- autotools使用(自动生成Makefile)
- 使用WSO2自动生成DataService
- 使用FreeMarker自动生成bean
- JavaScript的self和this使用小结
- 64-Bit Transition Guide for Cocoa Touch
- linux内核奇遇记之md源代码解读之七阵列同步一
- 笔记本怎么设置WIfi热点
- Html之表格_宽度_内对齐_实例
- 使用glue自动生成sprite
- JavaFX 3D部分介绍(4) Materials
- Configure ProGuard to Retain Line Numbers in Stack Traces
- 关于计算机网络的基本知识整理
- 【PSU升级】Oracle_RAC10.2.0.1到10.2.0.5.9的详细升级过程(二)
- hibernate对映射关系进行排序
- 如何改进iOS客户端的升级提醒功能
- 关于string转char*的问题
- MyEclipse本地破解显示中文界面