SmartSprites 智能批量合并 CSS 雪碧图

做前端的稍微有点经验的都知道可以通过合并小图片来减少请求数，

最早可能都是通过 fw、ps 等工具来手动合并，

这种方式的缺点就不吐槽了，效率低，可维护性差等等 ….

一些很厉害的人，往往会开发出很厉害的程序，来解决重复性的劳动，

1. https://github.com/iazrael/ispriter

2. http://www.uini.net/?p=870

3. http://csssprites.org/

4. more …

这些工具，我都稍微了解过，但最后觉得比较好使（适合自己）的是 SmartSprites(http://csssprites.org/)

个人觉得它的好处：

1. 语法简易，控制灵活；

1	`/** sprite: icon-14; sprite-image: url('../images/components/icon-14.png'); */`

　首先定义一个合并图片，定义内容包含，合并标识，合并图片生成地址，还有更多参数，比如：纵向还是横向合并，图片名字是否自动生成等 ….

.icon-add
-14

{

background-image
:
url
(
'@{bg-components-srpite-url}icon-add-14.png'
);
/** sprite-ref: icon-14;*/

}

.icon-batch-delete
-14

{

background-image
:
url
(
'@{bg-components-srpite-url}icon-batch-delete-14.png'
);
/** sprite-ref: icon-14;*/

}

使用时只需要在正常 gackgrund-image 后面加上特定的注释语法，sprite-ref 指向开始的 sprite 定义，标识那几个小图合并到同一张图上，

这个也有更多的参数，比如：position 方式，margin 值等等 …..

这样看起来是不是很简单明了，完全不破坏你原有的写法，只是增加注释而已！

2. 基于 cmd 命令，任何程序都可以调用

1	`smartsprites.cmd --root-dir-path xxx --output-dir-path xxx --css-file-suffix` `""`

指定一个 css 文件目录，指定一个输出目录，指定一个 css 文件生成后缀

当然这货也是有缺点的：

1. 基于 java ，所以必须需要 jre ；

2. 生成的 css 文件不能直接覆盖还有 css 文件，所以需要两个目录，一个 css 源目录，一个 css 输出目录；

3. 它是居于 css 注释语法，比如使用 Less 编译后就会破坏其注释语法，这个我已经有处理 grunt-contrib-less-smartsprite

更多文档请移步 http://csssprites.org/