CssGaga 快速上手指南

CssGagaytzong(涛哥)基于我们在朋友网日常的重构工作流程,为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于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. 处理一些浏览器兼容方面的问题;

img-thumb

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子目录中。例如:

image

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的主窗口,就会自动处理并编译到目标路径(相关的图片文件自动复制),如图:

img

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

CssGaga帮助索引

               

CssGaga 快速上手指南》上有8条评论

  1. yan

    上面图片中,检查关联性,不是拖入.import.css吧

    1. 小李刀刀 文章作者

      是.import.css。

      拖入“*.import.css”同时勾选“检查关联性”,则所有导入了这个文件的css文件都会被生成。

  2. Pingback引用通告: CssGaga – 帮助索引 « 99css

  3. Gino_wang

    今天上午请教刀刀哥关于CssGaga的问题,没想到下午刀刀哥就写了这篇博文,我非常感动。

评论已关闭。