【css樣式生成 & 圖片合併壓縮工具】Sprite，你值得擁有

　　很久很久沒有更新博客了，愈來愈懶。。。話說懶也有懶的好處，懶的時候你可能會想着用些神馬方法來幫你偷懶。沒錯，下面就給你們介紹個博主前不久開發的【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工具理念就是簡單，易用，不須要學習，誰都能用。

 

　　但願這個工具可以給你們帶來方便，提升工做效率。在使用過程當中若有任何建議和意見請聯繫博主，謝謝。