前端部署工具“CssGaga”常用功能介绍
一、css压缩、css合并
1.[css压缩]
* 去除注释和空白
* 去除结尾的分号
* 去除多余的分号
* 去除无效的规则
* 去除零值的单位并合并多余的零
* 去除小数点前多余的0
2.[css合并]
合并css文件内合并import引用的css文件
如 index.css中:
 @import url("reset.import.css");
@import url("default..css");
[index.css代码]  |  
  
合并后
 [reset.import.css代码] [default.css代码] [index.css代码]  |  
  
注:
·只合并同级的css
·“import”的文件不会生成到本地和同步目录,处理时会自动跳过
·只合并一次,若default.css中import了其他css文件(即便同级)则不做处理
二、 Slice to Code、AutoSprite(自动合并图片)
1.[Slice to Code]
可将各图标或sprite图片素材存放于slice文件夹内,通过cssgaga可以生成每个文件对应的css属性,包括长、宽、background。
等文件部署的时候对css文件进行处理,则可自动对各小图标或sprite文件进行自动合并,软件会自动更新各css属性值。
则可以大大减少我们手动进行sprite排列、生成的时间。(当然对于一些有特殊位置要求的或repeat的图片,则可另作处理)
2.[ AutoSprite]
自动把slice文件夹内图片进行处理生成sprite图片并自动修改css内background值。
三、 抽取图片
可将css文件引用的图片(jpg/gif/png)抽取到当前目录下的img-css文件名目录下,并替换图片路径为抽取后的路径,一般用于重新部署旧有项目,统一重新建立图片文件夹和css间的关系
四、 同步文件
勾选此项,会将当前css中以相对路径调用的css目录下的img、image、images、 absolute以及未勾选Data URI时的base64目录中的文件同时拷贝到目标环境,若文件不存在,CssGaga会有提示,可用来预防404错误。
【同步时,本地和服务器路径注意设置好对应关系。】
以上是在目前工作流程中比较常用的几个功能,还有一些其他自带的优化功能、环境配置等信息可以查看作者网站介绍:
- [视频] CssGaga 初体验 new
 - PPT及功能演示视频 old
 - 运行环境/下载/配置
 - css压缩
 - css合并
 - css优化
 - DataURI
 - 抽取图片
 - 图片压缩
 - 同步文件
 - 哀悼日网站一键变灰
 - 皮肤1toN
 - AutoSprite(自动合并图片)
 - Slice to Code
 - 同步资源
 - 时间戳
 - 会话管理
 - css关联性检查
 - 快捷键
 
