技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> SmartSprites - 命令行形式的CSS Sprites生成器

SmartSprites - 命令行形式的CSS Sprites生成器

浏览:1921次  出处信息

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）

Step2: 解压到任意目录。smartsprites-0.2.6下的文件：
windows下用的 － smartsprites.cmd
linux下用的 － smartsprites.sh
Ant的配置示例 － build.xml
建议先修改smartsprites.sh（windows下改smartsprites.cmd），找到这行：
java %OPTS% -Djava.ext.dirs=lib org.carrot2.labs.smartsprites.SmartSprites 将lib改成绝对路径。

Step3: 正常写CSS。比如，有这么一段：

.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); }
.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的注释后：

/** sprite:sp_all; sprite-image:url(../imgs/sp_all.png); sprite-layout:vertical; */
.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图片（根据需要也可声明多个）：

/** sprite:sp_all; sprite-image:url(../imgs/sp_all.png); sprite-layout:vertical; */
sprite:sp_all, sp_all必须唯一
sprite-image:url(保存的路径和文件名)；
sprite-layout:vertical|horizontal(默认)，sprite布局形式。

在想合并的背景图后面加注释，如：

background-image:url(../icons/feed_delete.png);/** sprite-ref:sp_all;sprite-alignment:right;sprite-margin-bottom:20px; */
sprite-ref:spriteID, 指定要合入哪个sprites图片中。
sprite-alignment:right|left(默认），指定x轴的对齐方式。如果sprite-layout:horizontal则值为top(默认)|bottom，指定y轴的对齐方式。
sprite-margin-bottom:20px，指定留白。同样还可以指定sprite-margin-(left | right | top | bottom)。
更多选项见http://csssprites.org/。

Step5: 执行SmartSprites:

$ ~/Library/smartsprites-0.2.6/smartsprites.sh -css-files ~/Desktop/icons/css/common.css
-css-files 指定要处理的css文件
或
$ ~/Library/smartsprites-0.2.6/smartsprites.sh -root-dir-path ~/Desktop/icons/
-root-dir-path 指定一个根目录，执行时会处理根目录（包括子目录）下所有*.css。
更多选项见http://csssprites.org/。

处理过程会显示出来：

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: 8)
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:”，如：

WARN: No ‘background-image’ CSS rule next to sprite reference comment: .item2 { background-image:url(../icons/feed_delete.png);/** sprite-ref:sp_all;sprite-margin-bottom:20px; */ . (/Users/kejun/Desktop/icons/css/common.css, line: 7)
现在这个版本对写法有一定限制。background-image一定要单独指定，这样会报错：
background:url(../icons/feed_delete.png);/** sprite-ref:sp_all;sprite-margin-bottom:20px; */
加注释的background-image要独立一行，这样会报错：
padding:10px;background-image:url(../icons/feed_delete.png);/** sprite-ref:sp_all;sprite-margin-bottom:20px; */

执行完后会生成一个新的文件：common-sprite.css。css变成：

.item1,.item2,.item3,.item4,.item5 { padding:2px 20px;margin-bottom:10px;border:1px solid #7D94CC;background:#A6ADFF no-repeat right; }
.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。当然，它肯定不是最优化的，毕竟是自动生成的。但平衡开发效率和易维护性，还是值得用的。现在前端开发的各个任务，基本都有对应的命令行工具，酷！

建议继续学习：

  1. CSS Sprites的原理    (阅读：4173)
  2. CSS Sprites图片切割术与图片优化    (阅读：2704)
  3. CSS Sprites 是否有必要？    (阅读：1696)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：iPad Orientation CSS
后一篇：理解CSS3线性渐变 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1