基于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
CuttermanTool
Cut&slice me
• PC/Android/iPhone三种模式•免图层命名•与Cutterman相仿
www.cutandslice.me
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