SmartSprites（http://csssprites.org/）是一个基于java开发的命令行形式的CSS Sprites生成器。它根据CSS文件中的特别注释自动合成图片，然后自动替换原来的图片，最后生成一个新的CSS文件。显然比手工上传、下载，再手工修改CSS方便多了。
它可以指定生成－个或多个sprites图片，要合并哪些图片也是由你指定的。这一点要比SpriteMe（http://spriteme.org/）好。SpriteMe本身不是开发阶段的工具。
简单介绍一下怎么用：
环境要求：JRE 1.5＋。java -version 试一下。
Step1: 下载文件包（目前最新版是0.2.6，http://csssprites.org/download.html?v0.2.6）
linux下用的 － smartsprites.sh
Step3: 正常写CSS。比如，有这么一段：
.item1 { background-image:url(../icons/feed_add.png); }
.item2 { background-image:url(../icons/feed_delete.png); }
.item3 { background-image:url(../icons/feed_edit.png); }
.item4 { background-image:url(../icons/feed_link.png); }
.item5 { background-image:url(../icons/feed.png); }
Step4: 加了SmartSprites的注释后：
.item1,.item2,.item3,.item4,.item5 { padding:2px 20px;margin-bottom:10px;border:1px solid #7D94CC;background:#A6ADFF no-repeat right; }
.item1 {
background-image:url(../icons/feed_add.png);/** sprite-ref:sp_all;sprite-alignment:right;sprite-margin-bottom:20px; */
}
.item2 {
background-image:url(../icons/feed_delete.png);/** sprite-ref:sp_all;sprite-alignment:right;sprite-margin-bottom:20px; */
}
.item3 {
background-image:url(../icons/feed_edit.png);/** sprite-ref:sp_all;sprite-alignment:right;sprite-margin-bottom:20px; */
}
.item4 {
background-image:url(../icons/feed_link.png);/** sprite-ref:sp_all;sprite-alignment:right;sprite-margin-bottom:20px; */
}
.item5 {
background-image:url(../icons/feed.png);/** sprite-ref:sp_all;sprite-alignment:right;sprite-margin-bottom:20px; */
}
注释的格式/** 属性:值 */。
首先声明一个sprite图片（根据需要也可声明多个）：
在想合并的背景图后面加注释，如：
Step5: 执行SmartSprites:
处理过程会显示出来：
INFO: Reading sprite image directives from /Users/kejun/Desktop/icons/css/common-sprite.css.
INFO: Reading sprite image directives from /Users/kejun/Desktop/icons/css/common.css.
INFO: Reading sprite reference directives from /Users/kejun/Desktop/icons/css/common-sprite.css.
INFO: Reading sprite reference directives from /Users/kejun/Desktop/icons/css/common.css.
INFO: Reading image from /Users/kejun/Desktop/icons/icons/feed_add.png. (/Users/kejun/Desktop/icons/css/common.css, line: 5)
INFO: Reading image from /Users/kejun/Desktop/icons/icons/feed_delete.png. (/Users/kejun/Desktop/icons/css/common.css, line: 
INFO: Reading image from /Users/kejun/Desktop/icons/icons/feed_edit.png. (/Users/kejun/Desktop/icons/css/common.css, line: 11)
INFO: Reading image from /Users/kejun/Desktop/icons/icons/feed_link.png. (/Users/kejun/Desktop/icons/css/common.css, line: 14)
INFO: Reading image from /Users/kejun/Desktop/icons/icons/feed.png. (/Users/kejun/Desktop/icons/css/common.css, line: 17)
INFO: Writing sprite image of size 16 x 180 for sprite ’sp_all’ to /Users/kejun/Desktop/icons/imgs/sp_all.png.
INFO: Creating CSS style sheet: /Users/kejun/Desktop/icons/css/common-sprite.css.
INFO: Reading CSS from /Users/kejun/Desktop/icons/css/common.css.
INFO: Writing CSS to /Users/kejun/Desktop/icons/css/common-sprite.css.
STATUS: SmartSprites processing completed in 372 ms.
失败会出现“WARN:”，如：
执行完后会生成一个新的文件：common-sprite.css。css变成：
.item1 {
background-image: url(’../imgs/sp_all.png’);
background-position: right -0px;
}
.item2 {
background-image: url(’../imgs/sp_all.png’);
background-position: right -36px;
}
.item3 {
background-image: url(’../imgs/sp_all.png’);
background-position: right -72px;
}
.item4 {
background-image: url(’../imgs/sp_all.png’);
background-position: right -108px;
}
.item5 {
background-image: url(’../imgs/sp_all.png’);
background-position: right -144px;
}
SmartSprites在开发阶段用很方便，图片有修改，只需执行一下命令。将它编入Ant里就更方便了，它提供了现成的build script。当然，它肯定不是最优化的，毕竟是自动生成的。但平衡开发效率和易维护性，还是值得用的。现在前端开发的各个任务，基本都有对应的命令行工具，酷！