基于gulp的前端动化 -...

基于Gulp的前端⾃自动化刘剑⾟辛 · 刘达慰

2014.12.12

很久以前Before

智能⾃自动化时代Auto

现在Now

The block partWork

制作 发布 打包

专题 实时预览

静态资源压缩 提交操作 路径转换PC Proj

样式预编译

多雪碧图合并

mobi Proj 2x雪碧图合并

The normalize partWork

CSS预编译：less sass stylus

CSS类名：BEM SMACSS APICSS

HTML模板：mustache ejs artTemplate

⼯工作流Flow

1 开发，实时预览、预编译

实现细节：

2 构建，预编译、合并与压缩

3 发布，将构建后静态⽂文件发布上线

4 打包，资源路径转换，源码打包

0 初始，⽣生成基础⺫⽬目录结构和样式库

⼯工作流Flow

开发 构建 发布

下游

初始化

yo lego

gulpgulp release

gulp zipgulp publish

打包

下游

⼯工作流Flow

【演⽰示】

Cut the PSDFlow

当切图遇上⼯工作流...

格式需求多样性

PC iPhone Android

Context

设计稿图层杂乱⽆无章

画个圈圈 � 诅咒你！

Context

切⽚片后续处理枯燥

切⽚片 CSS

Context

切图仅是前端⼀一环，但繁琐枯燥

杂乱无章的图层

越来越复杂的图片标准

？ � 如何突破

Context

切图⼯工具Tool

Photoshop CC Cutterman Cut&slice me Slicy

Photoshop CCTool

Photoshop CCTool

Name

Photoshop CC

CC 切图语法CC 切图语法

Tool

Photoshop CC

抽出资源

Tool

Cutterman

• PC/Android/iPhone三种模式•免图层命名•⾃自定义输出路径

www.cutterman.cn

Tool

CuttermanTool

Cut&slice me

• PC/Android/iPhone三种模式•免图层命名•与Cutterman相仿

www.cutandslice.me

Tool

Slicy

•执⾏行效率⾼高•漂亮的动画• Mac only

macrabbit.com/slicy/

Tool

Slicy

slicy 语法

Tool

⼯工具对⽐比总结Tool

Photoshop CC Cutterman Cut&slice me Slicy

90%

• PC端⾸首推 • 运⾏行效率⾼高 • ⽀支持格式多

90%

• 移动端⾸首推 • 运⾏行效率⼀一般 • ⽀支持格式多

70%

• 移动端备选• 运⾏行效率⼀一般 • 仅png，需标记

70%

• PC端备选 • 运⾏行效率⾼高 • Mac only，收费

图层命名约定

科学有调理的管理好PSD既是一名优秀设计 � 师的必备技能，也是设计师跟上下游同事打 � 交道的礼仪准则。

Tool

图层命名约定

每个分组以及分组外的每个图层都必须命名，且是 � 有意义的命名，像“图层1、副本2、组3”这样的 � 图层命名是严格禁止的；

Tool

切⽚片后续处理CSS

切⽚片 CSS

切⽚片后续处理CSS

问答环节Q&A

Q&A

G O O D B Y E

THANKS