您的位置: 首页 >日志>前端技术>详细内容

前端技术

前端部署工具“CssGaga”常用功能介绍

来源:本站原创 发布时间:2012-03-31 22:56:27 浏览次数: 【字体:

 

一、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.cssimport了其他css文件(即便同级)则不做处理

二、 Slice to CodeAutoSprite(自动合并图片)

1.[Slice to Code]

       可将各图标或sprite图片素材存放于slice文件夹内,通过cssgaga可以生成每个文件对应的css属性,包括长、宽、background

       等文件部署的时候对css文件进行处理,则可自动对各小图标或sprite文件进行自动合并,软件会自动更新各css属性值。

       则可以大大减少我们手动进行sprite排列、生成的时间。(当然对于一些有特殊位置要求的或repeat的图片,则可另作处理)

       2.[ AutoSprite]

              自动把slice文件夹内图片进行处理生成sprite图片并自动修改cssbackground值。

三、 抽取图片

可将css文件引用的图片(jpg/gif/png)抽取到当前目录下的img-css文件名目录下,并替换图片路径为抽取后的路径,一般用于重新部署旧有项目,统一重新建立图片文件夹和css间的关系

四、 同步文件

勾选此项,会将当前css中以相对路径调用的css目录下的imgimageimages absolute以及未勾选Data URI时的base64目录中的文件同时拷贝到目标环境,若文件不存在,CssGaga会有提示,可用来预防404错误。

【同步时,本地和服务器路径注意设置好对应关系。】

以上是在目前工作流程中比较常用的几个功能,还有一些其他自带的优化功能、环境配置等信息可以查看作者网站介绍:

 

  1. [视频] CssGaga 初体验 new
  2. PPT及功能演示视频 old
  3. 运行环境/下载/配置
  4. css压缩
  5. css合并
  6. css优化
  7. DataURI
  8. 抽取图片
  9. 图片压缩
  10. 同步文件
  11. 哀悼日网站一键变灰
  12. 皮肤1toN
  13. AutoSprite(自动合并图片)
  14. Slice to Code
  15. 同步资源
  16. 时间戳
  17. 会话管理
  18. css关联性检查
  19. 快捷键
×

用户登录