CssGaga是ytzong(涛哥)基于我们在朋友网日常的重构工作流程,为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows + .NET的环境,提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨询到有关CssGaga的问题,由于CssGaga本身也是在不断升级,以前的教程有些已经陈旧,为了帮助新接触到这个工具的同学,我这里再写一篇日志介绍一下CssGaga的基本使用。
运行CssGaga需要Windows操作系统、.Net Framework运行环境。
第一次运行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,选择开发目录(注意与生成目标路径对应,比如开发路径是E:\ofcss\dev,目标路径是E:\ofcss\output,那么E:\ofcss\dev\style\index.css就会编译到E:\ofcss\output\style\index.css),勾选需要使用的功能,选择编译目标。然后把需要发布的CSS文件拖入CssGaga的主窗口,就会自动处理并编译到目标路径(相关的图片文件自动复制),如图:
有关CssGaga更多功能介绍和使用技巧,参见:
来源:http://www.ofcss.com/2012/03/22/cssgaga-quick-start.html