Windows下使用Glue 生成：CSS spite

Glue 是一个简单的命令行工具，用来生成 CSS 精灵 Splites。CSS Splites 是将大量的图片合并成一张大图片一次性加载，然后通过 CSS 来使用具体某个小图片的技术。

特点：

• Automatic Sprite (PNG+CSS) creation.
• Automatic multi-dpi retina sprite creation.
• Support for multi-sprite projects.
• Create sprites from multiple folders.
• Multiple algorithms available.
• Automatic crop of unnecessary transparent borders around source images.
• Configurable paddings per image, sprite or project.
• Watch option to keep glue running watching for file changes.
• Optional .less output format.
• Automatic sprite images post-processing using OptiPNG.
• Sprite- and Project-level configuration via static config files.
• Configurable cache busting for sprite images.
• Customizable output css templates.
• Customizable CSS class names.

更多平台下的使用方法请参考官网 Glue官网

准备工作

1. 如何本地没有安装Python2.7的话 需要安装一下. Python 2.7.2 Windows installer.
2. 安装 PIL（Python Imaging Library） (PIL-1.1.7 for Python 2.7)
3. 安装 Python’s easyinstall easyinstall for Python 2.7.
4. 把Python的脚本目录添加到环境变量 PATH 中,添加C:\Python27\Scripts;
5. Start the cmd and type
   $ easy_install glue
   

等待命令行完成

开始工作

准备一个图片的文件夹 ，我这里准备了一个叫 source 的图片目录， 新建一个空目录 sprite 然后使用命令 glue source sprite 生成新的图片的CSS 速度非常之快啊。

生成的文件

生成的图片

css代码：

/* glue: 0.3 hash: 3dfa3abe41 */  .sprite-source-9,  .sprite-source-8,  .sprite-source-72,  .sprite-source-71,  .sprite-source-70,  .sprite-source-7,  .sprite-source-69,  .sprite-source-68,  .sprite-source-67,  .sprite-source-66,  .sprite-source-65,  .sprite-source-64,  .sprite-source-63,  .sprite-source-62,  .sprite-source-61,  .sprite-source-60,  .sprite-source-6,  .sprite-source-59,  .sprite-source-58,  .sprite-source-57,  .sprite-source-56,  .sprite-source-55,  .sprite-source-54,  .sprite-source-53,  .sprite-source-52,  .sprite-source-51,  .sprite-source-50,  .sprite-source-5,  .sprite-source-49,  .sprite-source-48,  .sprite-source-47,  .sprite-source-46,  .sprite-source-45,  .sprite-source-44,  .sprite-source-43,  .sprite-source-42,  .sprite-source-41,  .sprite-source-40,  .sprite-source-4,  .sprite-source-39,  .sprite-source-38,  .sprite-source-37,  .sprite-source-36,  .sprite-source-35,  .sprite-source-34,  .sprite-source-33,  .sprite-source-32,  .sprite-source-31,  .sprite-source-30,  .sprite-source-3,  .sprite-source-29,  .sprite-source-28,  .sprite-source-27,  .sprite-source-26,  .sprite-source-25,  .sprite-source-24,  .sprite-source-23,  .sprite-source-22,  .sprite-source-21,  .sprite-source-20,  .sprite-source-2,  .sprite-source-19,  .sprite-source-18,  .sprite-source-17,  .sprite-source-16,  .sprite-source-15,  .sprite-source-14,  .sprite-source-13,  .sprite-source-12,  .sprite-source-11,  .sprite-source-10,  .sprite-source-1{background-image:url('source.png');background-repeat:no-repeat}  .sprite-source-9{background-position:0px 0px;width:16px;height:16px;}  .sprite-source-8{background-position:-16px 0px;width:16px;height:16px;}  .sprite-source-72{background-position:0px -16px;width:16px;height:16px;}  .sprite-source-71{background-position:-16px -16px;width:16px;height:16px;}  .sprite-source-70{background-position:-32px 0px;width:16px;height:16px;}  .sprite-source-7{background-position:-32px -16px;width:16px;height:16px;}  .sprite-source-69{background-position:0px -32px;width:16px;height:16px;}  .sprite-source-68{background-position:-16px -32px;width:16px;height:16px;}  .sprite-source-67{background-position:-32px -32px;width:16px;height:16px;}  .sprite-source-66{background-position:-48px 0px;width:16px;height:16px;}  .sprite-source-65{background-position:-48px -16px;width:16px;height:16px;}  .sprite-source-64{background-position:-48px -32px;width:16px;height:16px;}  .sprite-source-63{background-position:0px -48px;width:16px;height:16px;}  .sprite-source-62{background-position:-16px -48px;width:16px;height:16px;}  .sprite-source-61{background-position:-32px -48px;width:16px;height:16px;}  .sprite-source-60{background-position:-48px -48px;width:16px;height:16px;}  .sprite-source-6{background-position:-64px 0px;width:16px;height:16px;}  .sprite-source-59{background-position:-64px -16px;width:16px;height:16px;}  .sprite-source-58{background-position:-64px -32px;width:16px;height:16px;}  .sprite-source-57{background-position:-64px -48px;width:16px;height:16px;}  .sprite-source-56{background-position:0px -64px;width:16px;height:16px;}  .sprite-source-55{background-position:-16px -64px;width:16px;height:16px;}  .sprite-source-54{background-position:-32px -64px;width:16px;height:16px;}  .sprite-source-53{background-position:-48px -64px;width:16px;height:16px;}  .sprite-source-52{background-position:-64px -64px;width:16px;height:16px;}  .sprite-source-51{background-position:-80px 0px;width:16px;height:16px;}  .sprite-source-50{background-position:-80px -16px;width:16px;height:16px;}  .sprite-source-5{background-position:-80px -32px;width:16px;height:16px;}  .sprite-source-49{background-position:-80px -48px;width:16px;height:16px;}  .sprite-source-48{background-position:-80px -64px;width:16px;height:16px;}  .sprite-source-47{background-position:0px -80px;width:16px;height:16px;}  .sprite-source-46{background-position:-16px -80px;width:16px;height:16px;}  .sprite-source-45{background-position:-32px -80px;width:16px;height:16px;}  .sprite-source-44{background-position:-48px -80px;width:16px;height:16px;}  .sprite-source-43{background-position:-64px -80px;width:16px;height:16px;}  .sprite-source-42{background-position:-80px -80px;width:16px;height:16px;}  .sprite-source-41{background-position:-96px 0px;width:16px;height:16px;}  .sprite-source-40{background-position:-96px -16px;width:16px;height:16px;}  .sprite-source-4{background-position:-96px -32px;width:16px;height:16px;}  .sprite-source-39{background-position:-96px -48px;width:16px;height:16px;}  .sprite-source-38{background-position:-96px -64px;width:16px;height:16px;}  .sprite-source-37{background-position:-96px -80px;width:16px;height:16px;}  .sprite-source-36{background-position:0px -96px;width:16px;height:16px;}  .sprite-source-35{background-position:-16px -96px;width:16px;height:16px;}  .sprite-source-34{background-position:-32px -96px;width:16px;height:16px;}  .sprite-source-33{background-position:-48px -96px;width:16px;height:16px;}  .sprite-source-32{background-position:-64px -96px;width:16px;height:16px;}  .sprite-source-31{background-position:-80px -96px;width:16px;height:16px;}  .sprite-source-30{background-position:-96px -96px;width:16px;height:16px;}  .sprite-source-3{background-position:-112px 0px;width:16px;height:16px;}  .sprite-source-29{background-position:-112px -16px;width:16px;height:16px;}  .sprite-source-28{background-position:-112px -32px;width:16px;height:16px;}  .sprite-source-27{background-position:-112px -48px;width:16px;height:16px;}  .sprite-source-26{background-position:-112px -64px;width:16px;height:16px;}  .sprite-source-25{background-position:-112px -80px;width:16px;height:16px;}  .sprite-source-24{background-position:-112px -96px;width:16px;height:16px;}  .sprite-source-23{background-position:0px -112px;width:16px;height:16px;}  .sprite-source-22{background-position:-16px -112px;width:16px;height:16px;}  .sprite-source-21{background-position:-32px -112px;width:16px;height:16px;}  .sprite-source-20{background-position:-48px -112px;width:16px;height:16px;}  .sprite-source-2{background-position:-64px -112px;width:16px;height:16px;}  .sprite-source-19{background-position:-80px -112px;width:16px;height:16px;}  .sprite-source-18{background-position:-96px -112px;width:16px;height:16px;}  .sprite-source-17{background-position:-112px -112px;width:16px;height:16px;}  .sprite-source-16{background-position:-128px 0px;width:16px;height:16px;}  .sprite-source-15{background-position:-128px -16px;width:16px;height:16px;}  .sprite-source-14{background-position:-128px -32px;width:16px;height:16px;}  .sprite-source-13{background-position:-128px -48px;width:16px;height:16px;}  .sprite-source-12{background-position:-128px -64px;width:16px;height:16px;}  .sprite-source-11{background-position:-128px -80px;width:16px;height:16px;}  .sprite-source-10{background-position:-128px -96px;width:16px;height:16px;}  .sprite-source-1{background-position:-128px -112px;width:16px;height:16px;}