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/