前端部署工具“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关联性检查
- 快捷键
用户登录
还没有账号?
立即注册