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'); */

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

1 2 3 4 5 6 7 8

.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/