基于Gulp的前端⾃自动化

刘剑⾟辛 · 刘达慰 2014.12.12

Before 很久以前

Auto 智能⾃自动化时代

Now 现在

Work The block part



制作



发布



打包



专题



实时预览



PC Proj



样式预编译 多雪碧图合并



静态资源压缩 提交操作



mobi Proj



2x雪碧图合并



路径转换

Work The normalize part

CSS预编译：less sass stylus CSS类名：BEM SMACSS APICSS

HTML模板：mustache ejs artTemplate

Flow ⼯工作流

实现细节： 0 初始，⽣生成基础⺫⽬目录结构和样式库 1 开发，实时预览、预编译 2 构建，预编译、合并与压缩 3 发布，将构建后静态⽂文件发布上线 4 打包，资源路径转换，源码打包

Flow ⼯工作流



初始化



开发



构建



yo lego

gulp gulp release gulp publish gulp zip



下游



发布



打包



下游

Flow ⼯工作流

【演⽰示】

Flow Cut the PSD

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

Context 格式需求多样性



PC



iPhone



Android

Context 设计稿图层杂乱⽆无章

画个圈圈  诅咒你！

Context 切⽚片后续处理枯燥



切⽚片



CSS

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



越来越复 杂的图片

标准



？ 

如何突破



杂乱无章 的图层

Tool 切图⼯工具



Photoshop CC



Cutterman



Cut&slice me



Slicy

Tool Photoshop CC

Tool Photoshop CC



Name

Tool Photoshop CC

CC 切图语法 CC 切图语法

Tool Photoshop CC

抽出资源

Tool Cutterman

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

www.cutterman.cn

Tool Cutterman

Tool Cut&slice me

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

www.cutandslice.me

Tool Slicy

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

macrabbit.com/slicy/

Tool Slicy

slicy 语法

Tool ⼯工具对⽐比总结



90%



90%



70%



70%



Photoshop CC

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



Cutterman

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



Cut&slice me

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



Slicy

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

Tool 图层命名约定

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

Tool 图层命名约定

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

CSS 切⽚片后续处理



切⽚片



CSS

CSS 切⽚片后续处理

Q&A 问答环节

Q&A

THANKS

GOODBYE