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. 语法简易，控制灵活；

/** 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 命令，任何程序都可以调用 

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/

 如果在使用 smartsprite 过程中有什么疑问，可以留言，共同讨论！