AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

基于Gulp的前端自动化 by 刘剑辛&刘达慰

发布者 FEer   简介 前端技术
发布于 1433317584525  浏览 2515 关键词 前端, AngularJS 
分享到

第1页

基于Gulp的前端⾃自动化

刘剑⾟辛 · 刘达慰 2014.12.12



第2页

Before 很久以前



第3页

Auto 智能⾃自动化时代



第4页

Now 现在



第5页

Work The block part



制作



发布



打包



专题



实时预览



PC Proj



样式预编译 多雪碧图合并



静态资源压缩 提交操作



mobi Proj



2x雪碧图合并



路径转换



第6页

Work The normalize part

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

HTML模板:mustache ejs artTemplate



第7页

Flow ⼯工作流

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



第8页

Flow ⼯工作流



初始化



开发



构建



yo lego

gulp gulp release gulp publish gulp zip



下游



发布



打包



下游



第9页

Flow ⼯工作流

【演⽰示】



第10页

Flow Cut the PSD

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



第11页

Context 格式需求多样性



PC



iPhone



Android



第12页

Context 设计稿图层杂乱⽆无章

画个圈圈  诅咒你!



第13页

Context 切⽚片后续处理枯燥



切⽚片



CSS



第14页

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



越来越复 杂的图片

标准



? 

如何突破



杂乱无章 的图层



第15页

Tool 切图⼯工具



Photoshop CC



Cutterman



Cut&slice me



Slicy



第16页

Tool Photoshop CC



第17页

Tool Photoshop CC



Name



第18页

Tool Photoshop CC

CC 切图语法 CC 切图语法



第19页

Tool Photoshop CC

抽出资源



第20页

Tool Cutterman

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

www.cutterman.cn



第21页

Tool Cutterman



第22页

Tool Cut&slice me

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

www.cutandslice.me



第23页

Tool Slicy

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

macrabbit.com/slicy/



第24页

Tool Slicy

slicy 语法



第25页

Tool ⼯工具对⽐比总结



90%



90%



70%



70%



Photoshop CC

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



Cutterman

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



Cut&slice me

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



Slicy

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



第26页

Tool 图层命名约定

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



第27页

Tool 图层命名约定

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



第28页

CSS 切⽚片后续处理



切⽚片



CSS



第29页

CSS 切⽚片后续处理



第30页

Q&A 问答环节

Q&A



第31页

THANKS

GOODBYE



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。