首页 > 代码库 > SmartSprites 智能批量合并 CSS 雪碧图
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/
SmartSprites 智能批量合并 CSS 雪碧图