CssGaga 快速上手指南

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

CssGaga功能特性

合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；

优化、压缩CSS代码，减少带宽占用，加快下载速度；

优化、发布CSS中使用到的图片，可以不必考虑多发、漏发图片文件的情况；

自动应用CSS Sprite技术，开发阶段不用考虑图标合并，便于管理，发布后的多个图标自动合并为一个图片，并自动更新CSS代码处理背景定位；

对CSS代码中使用到的图片自动加时间戳，以便在使用长Cache与更新后的图片及时生效；

样式有多套配色风格时，通过CssGaga可以实现皮肤的自动化同步；

CSS样式、图片一键去色功能，在遇到特殊政治任务的时候，全站能迅速进行去色改版，迅速恢复；

生成iOS设备所需的不同尺寸Icon文件；

处理一些浏览器兼容方面的问题；

CssGaga下载和配置

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

下载并安装Microsoft .NET Framework 4.0

下载并解压CssGaga最新版（绿色软件，不用安装）

对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="目标环境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的主窗口，就会自动处理并编译到目标路径（相关的图片文件自动复制），如图：








本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名小李刀刀（包含链接）。如您有任何疑问或者授权方面的协商，请给我发送邮件。