好久好久沒有更新博客了，越來越懶。。。話說懶也有懶的好處，懶的時候你可能會想着用些神馬方法來幫你偷懶。沒錯，下面就給大家介紹個博主前不久開發的【css樣式生成 & 圖片合並壓縮工具】Spirte。
功能簡介：
1. 自動合並選定文件夾下所有png圖片為一張大圖並壓縮（水平和垂直兩個方向）
2. 智能生成css樣式和測試文件（命名規則來，hover和click有驚喜哦）
點擊Go會自動生成sprite.html（css樣式）和sprite.png(合並后的圖片)，如果勾選了壓縮還有有個sprite_uncompressed.png未壓縮文件對比。
軟件截圖：
什么是Css Sprite（來自百度百科）？
CSS Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會 像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需 顧忌這個問題。
按照yahoo的rules for high performance web sites的原則，應當較少Client與Server端間 的HTTP Request次數。通過CSS Sprites方法將多張圖片組裝成單獨的一張圖片，可以有效減少HTTP請求 的次數。
當整幅圖片載入完成后，你就可以使用CSS方法通過設置背景位置的方式完成所需圖片的准確調用。
加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。
為什么博主要寫Sprite工具？
我們來一個很常見的工作流：
1. 設計師把單個圖片切好；
2. 手動用PS把這些圖片合成一張大圖；
3. Web前端攻城獅苦逼的拿着這張圖一個個的寫background-position來定位單個小圖；
第2,3步這苦逼的步驟。。。費時費力，自身又得不到任何提高，我們只想送她兩個字：呵呵。。。
用Sprite工具，讓我們看下會有什么變化
1. 設計師把單個圖片切好；
2. 任何人打開Sprite工具，選擇要合並圖片文件夾，點擊“Go”，即可完成圖片合並和css樣式生成工作；
wow，步驟由3步變2步，更神奇的是第2步是如此的簡單，愜意，輕輕一點，萬事ok。
怎么使用Sprite工具？
咦，前面不是說只要選定圖片所在文件夾一點就可以生成了嗎？搞個使用說明是幾個意思？各位看官稍安勿躁，確實按上述方法是可以做到這些，但咱這個工具還具備了根據圖片名智能生成css的作用。打個比方圖片名為btn_hover.png在生成css時會自動解析成btn:hover。沒錯，以下是具體規則實例：
wechat => .wechat
wechat_hover => .wechat:hover
wechat-hover => .wechat:hover
wechat_ibg_hover => .wechat_ibg:hover
wechat-ibg-hover => .wechat-ibg:hover
wechat.ibg => .wechat .ibg
wechat.ibg.wechat_focus => .wechat .ibg .wechat:focus
wechat.ibg.wechat_none => .wechat .ibg . wechat_none
wechat_hover.wechat_none => .wechat:hover .wechat_none
wechat-hover.wechat-none => .wechat:hover .wechat-none
是不是大概看懂了，我再詳細解釋下：
1. 生成的css類名已圖片名為准；
2. 符號“."是分隔符，會生成多個類；
3. 符號”_"和“-”后如果是css偽類關鍵字（:link, :visited, :hover, :active, :focus, :before, :after, :lang）將自動生成css偽類
e.g. wechat-hover => .wechat:hover
運行環境：
WIN32， .net framework 2.0
下載：
源代碼和demo請移步：https://github.com/wuqiang1985/sprite
其他：
有人可能會說，為啥不用sass和compass，人家也有sprite功能啊？確實，他那功能確實很牛叉，但還是稍有學習成本，而像css預編譯工具這種在團隊開發時對來的利弊業界褒貶不一。而Sprite工具理念就是簡單，易用，不需要學習，誰都能用。
希望這個工具能夠給大家帶來方便，提高工作效率。在使用過程中如有任何建議和意見請聯系博主，謝謝。