CssGaga是ytzong（濤哥）基于我們在朋友網日常的重構工作流程，為了提高工作效率而開發(fā)并不斷完善起來的一個重構輔助工具。運行于Windows + .NET的環(huán)境，提供了重構相關的一系列解決方案。最近越來越多的朋友通過騰訊微博、QQ和Email咨詢到有關CssGaga的問題，由于CssGaga本身也是在不斷升級，以前的教程有些已經陳舊，為了幫助新接觸到這個工具的同學，我這里再寫一篇日志介紹一下CssGaga的基本使用。

CssGaga功能特性

1. 合并import的CSS文件，開發(fā)階段將CSS文件按模塊拆分復用，發(fā)布上線后合并減少HTTP請求；
2. 優(yōu)化、壓縮CSS代碼，減少帶寬占用，加快下載速度；
3. 優(yōu)化、發(fā)布CSS中使用到的圖片，可以不必考慮多發(fā)、漏發(fā)圖片文件的情況；
4. 自動應用CSS Sprite技術，開發(fā)階段不用考慮圖標合并，便于管理，發(fā)布后的多個圖標自動合并為一個圖片，并自動更新CSS代碼處理背景定位；
5. 對CSS代碼中使用到的圖片自動加時間戳，以便在使用長Cache與更新后的圖片及時生效；
6. 樣式有多套配色風格時，通過CssGaga可以實現(xiàn)皮膚的自動化同步；
7. CSS樣式、圖片一鍵去色功能，在遇到特殊政治任務的時候，全站能迅速進行去色改版，迅速恢復；
8. 生成iOS設備所需的不同尺寸Icon文件；
9. 處理一些瀏覽器兼容方面的問題；

CssGaga下載和配置

運行CssGaga需要Windows操作系統(tǒng)、.Net Framework運行環(huán)境。

1. 下載并安裝Microsoft .NET Framework 4.0
2. 下載并解壓CssGaga最新版（綠色軟件，不用安裝）
3. 對CssGaga進行初始化配置

第一次運行CssGaga前，需要對其進行必要的配置。主要是指定CssGaga的編譯目標路徑、站點的基本URL。具體步驟：

打開CssGaga所在目錄，復制CssGaga.exe.config.sample文件，重命名為CssGaga.exe.config。

用任意文本編輯器打開CssGaga.exe.config，默認的代碼如下：

<?xml version="1.0"?>
<configuration><appSettings><add key="pathSource" value="E:\" /><add key="webSiteUrl" value="http://qzonestyle.gtimg.cn" /><add key="pathReport" value="/usr/local/imgcache/htdocs" /><add key="pathDest1Name" value="目標環(huán)境1" /><add key="pathDest1" value="E:\output" /><add key="pathReport1" value="/usr/local/imgcache/htdocs" /><add key="chkTemp" value="1" /></appSettings>
</configuration>

其中pathDest1Name、pathDest1、pathReport1三個節(jié)點為一組，代表一個編譯目標，CssGaga支持多組編譯目 標，要增加新的編譯目標，只要復制粘貼這三個節(jié)點，修改“1”為“2”及更大的數(shù)字，相同數(shù)字為一組。例如，我設定本機的一個目錄為編譯目標：

<add key="pathDest1Name" value="本機輸出" />
<add key="pathDest1" value="D:\ofcss\style" />
<add key="pathReport1" value="/style" />

pathDest1Name代表這個目標在CssGaga界面上顯示的名稱，pathDest1代表這個目標的真實物理路 徑，pathReport1代表這個路徑編譯機上的地址（不使用SMB共享進行文件部署的話，這個節(jié)點設置不設置就無所謂了，可以考慮設置為你站點上該目 錄的相對路徑）。

上面的設定表示當我在CssGaga上勾選“本機輸出”時，編譯后的CSS文件和圖片文件會生成到D:\ofcss\style目錄下。

CssGaga開發(fā)約定

根據(jù)互聯(lián)網上一些優(yōu)秀團隊的經驗以及我們自己在工作中的經驗，CssGaga建議使用者在進行重構時遵循以下約定：

1. 目錄結構

• 把所有的CSS文件放在同一個目錄下。網頁中用link標簽引用的CSS文件，我們稱之為CSS橋文件（CSS Bridge），真正的樣式規(guī)則代碼按照模塊拆分存放在不同的CSS文件中，這些CSS文件以“.import.css”結尾，代表它們不能直接被頁面引 用，而要在橋文件中通過@import指令導入。
• 把所有的圖片文件放在CSS文件所在目錄下的子目錄（例如img）中。
• 把所有需要進行CSS Sprite合并的圖標文件放在CSS文件所在目錄下的slice子目錄中。
• 把所有自定義鼠標樣式（.ani、.cur）放在CSS文件所在目錄下的absolute子目錄中。例如：

2.代碼編寫

• 在CSS Bridge文件中，用@import指令，把頁面用到的模塊css組合到一起
• 在編寫需要做CSS Sprite合并的背景圖片樣式時，不要縮寫，必須把background-image樣式單獨寫，并且不寫background-position屬性 （因為這些圖標在開發(fā)階段并沒有合并，也就不需要定位，合并之后的background-position會由CssGaga自動生成），如果有PNG Alpha透明的圖片，需要針對IE6單獨做一張PNG 索引色透明圖片時，可以用_background-image做Hack，CssGaga在合并時，會單獨為IE6合并一張圖片。
• @import指令不要嵌套使用（A import B，則B不要再import其它文件），原則上不要import其它目錄的文件（CssGaga不會做合并處理）。

3. 編譯發(fā)布

在重構完成后，運行CssGaga，選擇開發(fā)目錄（注意與生成目標路徑對應，比如開發(fā)路徑是E:\ofcss\dev，目標路徑是E:\ofcss\output，那么E:\ofcss\dev\style\index.css就會編譯到E:\ofcss\output\style\index.css），勾選需要使用的功能，選擇編譯目標。然后把需要發(fā)布的CSS文件拖入CssGaga的主窗口，就會自動處理并編譯到目標路徑（相關的圖片文件自動復制），如圖：

本文基于署名 2.5 中國大陸許可協(xié)議發(fā)布，歡迎轉載，演繹或用于商業(yè)目的，但是必須保留本文的署名小李刀刀（包含鏈接）。如您有任何疑問或者授權方面的協(xié)商，請給我發(fā)送郵件。

轉載于:https://www.cnblogs.com/ginowang42/archive/2012/03/22/2411583.html

總結

以上是生活随笔為你收集整理的CssGaga 快速上手指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。