CssGaga 一款强大的前端重构工具

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值