前端构建工具 CssGaga 快速上手指南

CssGaga是ytzong（涛哥）基于我们在朋友网日常的重构工作流程，为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows + .NET的环境，提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨询到有关CssGaga的问题，由于CssGaga本身也是在不断升级，以前的教程有些已经陈旧，为了帮助新接触到这个工具的同学，我这里再写一篇日志介绍一下CssGaga的基本使用。

CssGaga功能特性

1. 合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；
2. 优化、压缩CSS代码，减少带宽占用，加快下载速度；
3. 优化、发布CSS中使用到的图片，可以不必考虑多发、漏发图片文件的情况；
4. 自动应用CSS Sprite技术，开发阶段不用考虑图标合并，便于管理，发布后的多个图标自动合并为一个图片，并自动更新CSS代码处理背景定位；
5. 对CSS代码中使用到的图片自动加时间戳，以便在使用长Cache与更新后的图片及时生效；
6. 样式有多套配色风格时，通过CssGaga可以实现皮肤的自动化同步；
7. CSS样式、图片一键去色功能，在遇到特殊政治任务的时候，全站能迅速进行去色改版，迅速恢复；
8. 生成iOS设备所需的不同尺寸Icon文件；
9. 处理一些浏览器兼容方面的问题；

CssGaga下载和配置

运行CssGaga需要Windows操作系统、.Net Framework运行环境。

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" encoding="utf-8"?>
<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="目标环境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三个节点为一组，代表一个编译目标，CssGaga支持多组编译目标，要增加新的编译目标，只要复制粘贴这三个节点，修改“1”为“2”及更大的数字，相同数字为一组。例如，我设定本机的一个目录为编译目标：

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

pathDest1Name代表这个目标在CssGaga界面上显示的名称，pathDest1代表这个目标的真实物理路径，pathReport1代表这个路径编译机上的地址（不使用SMB共享进行文件部署的话，这个节点设置不设置就无所谓了，可以考虑设置为你站点上该目录的相对路径）。

上面的设定表示当我在CssGaga上勾选“本机输出”时，编译后的CSS文件和图片文件会生成到D:\ofcss\style目录下。

CssGaga开发约定

根据互联网上一些优秀团队的经验以及我们自己在工作中的经验，CssGaga建议使用者在进行重构时遵循以下约定：

1. 目录结构

• 把所有的CSS文件放在同一个目录下。网页中用link标签引用的CSS文件，我们称之为CSS桥文件（CSS Bridge），真正的样式规则代码按照模块拆分存放在不同的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属性（因为这些图标在开发阶段并没有合并，也就不需要定位，合并之后的background-position会由CssGaga自动生成），如果有PNG Alpha透明的图片，需要针对IE6单独做一张PNG 索引色透明图片时，可以用_background-image做Hack，CssGaga在合并时，会单独为IE6合并一张图片。
• @import指令不要嵌套使用（A import B，则B不要再import其它文件），原则上不要import其它目录的文件（CssGaga不会做合并处理）。

3. 编译发布

在重构完成后，运行CssGaga，选择开发目录（注意与生成目标路径对应，比如开发路径是E:\ofcss\dev，目标路径是E:\ofcss\output，那么E:\ofcss\dev\style\index.css就会编译到E:\ofcss\output\style\index.css），勾选需要使用的功能，选择编译目标。然后把需要发布的CSS文件拖入CssGaga的主窗口，就会自动处理并编译到目标路径（相关的图片文件自动复制），如图：

有关CssGaga更多功能介绍和使用技巧，参见：

CssGaga帮助索引

来源：http://www.ofcss.com/2012/03/22/cssgaga-quick-start.html