基于gulp的前端动化 -...
TRANSCRIPT
![Page 1: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/1.jpg)
基于Gulp的前端⾃自动化刘剑⾟辛 · 刘达慰
2014.12.12
![Page 2: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/2.jpg)
很久以前Before
![Page 3: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/3.jpg)
智能⾃自动化时代Auto
![Page 4: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/4.jpg)
现在Now
![Page 5: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/5.jpg)
The block partWork
制作 发布 打包
专题 实时预览
静态资源压缩 提交操作 路径转换PC Proj
样式预编译
多雪碧图合并
mobi Proj 2x雪碧图合并
![Page 6: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/6.jpg)
The normalize partWork
CSS预编译:less sass stylus
CSS类名:BEM SMACSS APICSS
HTML模板:mustache ejs artTemplate
![Page 7: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/7.jpg)
⼯工作流Flow
1 开发,实时预览、预编译
实现细节:
2 构建,预编译、合并与压缩
3 发布,将构建后静态⽂文件发布上线
4 打包,资源路径转换,源码打包
0 初始,⽣生成基础⺫⽬目录结构和样式库
![Page 8: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/8.jpg)
⼯工作流Flow
开发 构建 发布
下游
初始化
yo lego
gulpgulp release
gulp zipgulp publish
打包
下游
![Page 9: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/9.jpg)
⼯工作流Flow
【演⽰示】
![Page 10: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/10.jpg)
Cut the PSDFlow
当切图遇上⼯工作流...
![Page 11: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/11.jpg)
格式需求多样性
PC iPhone Android
Context
![Page 12: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/12.jpg)
设计稿图层杂乱⽆无章
画个圈圈 � 诅咒你!
Context
![Page 13: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/13.jpg)
切⽚片后续处理枯燥
切⽚片 CSS
Context
![Page 14: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/14.jpg)
切图仅是前端⼀一环,但繁琐枯燥
杂乱无章的图层
越来越复杂的图片标准
? � 如何突破
Context
![Page 15: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/15.jpg)
切图⼯工具Tool
Photoshop CC Cutterman Cut&slice me Slicy
![Page 16: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/16.jpg)
Photoshop CCTool
![Page 17: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/17.jpg)
Photoshop CCTool
Name
![Page 18: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/18.jpg)
Photoshop CC
CC 切图语法CC 切图语法
Tool
![Page 19: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/19.jpg)
Photoshop CC
抽出资源
Tool
![Page 21: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/21.jpg)
CuttermanTool
![Page 22: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/22.jpg)
Cut&slice me
• PC/Android/iPhone三种模式•免图层命名•与Cutterman相仿
www.cutandslice.me
Tool
![Page 24: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/24.jpg)
Slicy
slicy 语法
Tool
![Page 25: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/25.jpg)
⼯工具对⽐比总结Tool
Photoshop CC Cutterman Cut&slice me Slicy
90%
• PC端⾸首推 • 运⾏行效率⾼高 • ⽀支持格式多
90%
• 移动端⾸首推 • 运⾏行效率⼀一般 • ⽀支持格式多
70%
• 移动端备选• 运⾏行效率⼀一般 • 仅png,需标记
70%
• PC端备选 • 运⾏行效率⾼高 • Mac only,收费
![Page 26: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/26.jpg)
图层命名约定
科学有调理的管理好PSD既是一名优秀设计 � 师的必备技能,也是设计师跟上下游同事打 � 交道的礼仪准则。
Tool
![Page 27: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/27.jpg)
图层命名约定
每个分组以及分组外的每个图层都必须命名,且是 � 有意义的命名,像“图层1、副本2、组3”这样的 � 图层命名是严格禁止的;
Tool
![Page 28: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/28.jpg)
切⽚片后续处理CSS
切⽚片 CSS
![Page 29: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/29.jpg)
切⽚片后续处理CSS
![Page 30: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/30.jpg)
问答环节Q&A
Q&A
![Page 31: 基于Gulp的前端动化 - ppt.fequan.comppt.fequan.com/mingqi/基于Gulp的前端自动化@刘剑辛&刘达慰.pdf · Work The normalize part CSS预编译:less sass stylus CSS类名:BEM](https://reader030.vdocuments.net/reader030/viewer/2022040107/5ecd156a381ce046273d90a5/html5/thumbnails/31.jpg)
G O O D B Y E
THANKS