[WebRebuild 2013] 移动终端重构Workflow

移动终端重构 Workﬂow ⻩黄⾃自⼒力 (@hzlzh)

⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang)

⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) • 腾讯 ecd
- 移动终端设计中⼼心

⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) • 前端开发组(TmT) •
腾讯 ecd - 移动终端设计中⼼心

⾃自我介绍 !2 ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) • 前端开发组(TmT) •
腾讯微购物、电商微信O2O线等 • 腾讯 ecd - 移动终端设计中⼼心

WebReBuild：蜕变 !3

!4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE 做快乐的开发者
• ⼀一致性好

!4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE ⽆无需在意各种
IE hack 做快乐的开发者 • ⼀一致性好

!4 移动端的福利 • ⽀支持度⾼高 • 紧跟潮流 • No IE 全⾯面拥抱
HTML 5 + CSS 3 ⽆无需在意各种 IE hack 做快乐的开发者 • ⼀一致性好

HTML 5 + CSS 3 新的特性和技术会迅速在浏览器更新，玩法多样⽆无需在意各种 IE hack 做快乐的开发者 • ⼀一致性好

HTML 5 + CSS 3 新的特性和技术会迅速在浏览器更新，玩法多样⽆无需在意各种 IE hack 做快乐的开发者 • ⼀一致性好 HTML5 ⻚页⾯面 | App(如: 微信) 内浏览器调⽤用 App 内 hybrid ⻚页⾯面 | Web App

!5 移动终端重构挑战总有兼容不完的新设备冒出来

!5 移动终端重构挑战 • 设备多 • 屏幕⼩小总有兼容不完的新设备冒出来

!5 移动终端重构挑战 • 设备多 • 屏幕⼩小 640x960 | 480x800 总有兼容不完的新设备冒出来

!5 移动终端重构挑战 • 设备多 • 屏幕⼩小 4 -> 4s ->
5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

!6 移动终端重构挑战 • 设备多 • 屏幕⼩小 4 -> 4s ->
5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

!6 移动终端重构挑战 • 流量贵 • 设备多 • 屏幕⼩小 4 ->
4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

!6 移动终端重构挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小
4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

0.01元/KB 〜～ 0.03元/KB 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

0.01元/KB 〜～ 0.03元/KB 10 kb/s ~ 40 kb/s [2G⺴⽹网速] 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

!7 移动终端重构的挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 屏幕⼩小
0.01元/KB 〜～ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

!7 移动终端重构的挑战 • 流量贵 • ⺴⽹网速慢 • 设备多 • 更新快
• 屏幕⼩小 0.01元/KB 〜～ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

!7 移动终端重构的挑战 • 性能变 • 流量贵 • ⺴⽹网速慢 • 设备多
• 更新快 • 屏幕⼩小 0.01元/KB 〜～ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch 640x960 | 480x800 总有兼容不完的新设备冒出来

• 更新快 • 屏幕⼩小 0.01元/KB 〜～ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch iOS 7 & Android 4.4 | Hybrid 内⻚页 & 微信内⻚页 640x960 | 480x800 总有兼容不完的新设备冒出来

• 更新快 • 屏幕⼩小 0.01元/KB 〜～ 0.03元/KB 10 kb/s ~ 40 kb/s 4 -> 4s -> 5 -> 5s | Google Glass | iWatch iOS 7 & Android 4.4 | Hybrid 内⻚页 & 微信内⻚页 640x960 | 480x800 设备性能跑分、GPU、CPU 总有兼容不完的新设备冒出来

!8 解决关键点 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢
• 更新快 • 屏幕⼩小

• 更新快 • 屏幕⼩小 Viewport 缩放 | Retina 2x

• 更新快图⽚片压缩 | Gzip | 请求合并 | CDN • 屏幕⼩小 Viewport 缩放 | Retina 2x

• 更新快 LazyLoad 按需加载、延时加载图⽚片压缩 | Gzip | 请求合并 | CDN • 屏幕⼩小 Viewport 缩放 | Retina 2x

• 更新快 LazyLoad 按需加载、延时加载 Responsive Web Design (Location Response) 图⽚片压缩 | Gzip | 请求合并 | CDN • 屏幕⼩小 Viewport 缩放 | Retina 2x

• 更新快 LazyLoad 按需加载、延时加载 Responsive Web Design (Location Response) 图⽚片压缩 | Gzip | 请求合并 | CDN 新特性、新技术的使⽤用 • 屏幕⼩小 Viewport 缩放 | Retina 2x

• 更新快 LazyLoad 按需加载、延时加载 Responsive Web Design (Location Response) 图⽚片压缩 | Gzip | 请求合并 | CDN 新特性、新技术的使⽤用 • 屏幕⼩小 Viewport 缩放 | Retina 2x 适当的效果做减法

!9 团队项⺫⽬目特点以TmT团队为例

!9 团队项⺫⽬目特点 • 产品线多以TmT团队为例

!9 团队项⺫⽬目特点 • 产品线多同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 团队项⺫⽬目特点 • 移动化 • 产品线多同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 团队项⺫⽬目特点 • 移动化 • 产品线多 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 团队项⺫⽬目特点 • 下游不同 • 移动化 • 产品线多 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）同时多个产品线项⺫⽬目并发进⾏行
以TmT团队为例

!9 团队项⺫⽬目特点 • 下游不同 • 移动化 • 产品线多接⼝口多个不同的下游开发团队 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）
同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 产品线多
接⼝口多个不同的下游开发团队 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 产品线多
接⼝口多个不同的下游开发团队产品开发周期短、快速响应 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台
• 产品线多接⼝口多个不同的下游开发团队产品开发周期短、快速响应 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

• 产品线多接⼝口多个不同的下游开发团队产品开发周期短、快速响应 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）组员可随时穿插与各个项⺫⽬目之间，跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!9 • 性能变 • 流量贵 • 设备多 • ⺴⽹网速慢 •
更新快 • 屏幕⼩小团队项⺫⽬目特点 • 下游不同 • 迭代快 • 移动化 • 跨平台 • 产品线多接⼝口多个不同的下游开发团队产品开发周期短、快速响应 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）组员可随时穿插与各个项⺫⽬目之间，跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

• 产品线多接⼝口多个不同的下游开发团队产品开发周期短、快速响应 95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）组员可随时穿插与各个项⺫⽬目之间，跨平台 Windows & Mac 同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例

!10 解决⽅方案移动终端重构的 Workﬂow

!10 解决⽅方案移动终端重构的 Workﬂow TmT Workﬂow

什么是TmT Workﬂow ? !11

什么是TmT Workﬂow ? !11 • 它是⼀一组流程？

什么是TmT Workﬂow ? !11 懒 • 它是⼀一组流程？

• 它是⼀一套解决⽅方案？什么是TmT Workﬂow ? !11 懒 • 它是⼀一组流程？

• 它是⼀一套解决⽅方案？什么是TmT Workﬂow ? !11 懒 • 它是⼀一批⼯工具？ •
它是⼀一组流程？

还是⼀一个模版？ • 它是⼀一组流程？

还是⼀一个模版？ • 它是⼀一种思路！ • 它是⼀一组流程？

• 它是⼀一套解决⽅方案？什么是TmT Workﬂow ? !11 Workﬂow • 它是⼀一批⼯工具？ •
还是⼀一个模版？ • 它是⼀一种思路！ • 它是⼀一组流程？

先要搞定什么？ !12 圣战⼀一场永⽆无⽌止境的战⽃斗注：⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

先要搞定什么？ !12 圣战⼀一场永⽆无⽌止境的战⽃斗 • Win vs Mac 注：⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

先要搞定什么？ !12 圣战⼀一场永⽆无⽌止境的战⽃斗 • Emac vs Vim vs Sublime
vs IDEA 等等 • Win vs Mac 注：⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

先要搞定什么？ !12 圣战⼀一场永⽆无⽌止境的战⽃斗 • Space vs Tab • Emac
vs Vim vs Sublime vs IDEA 等等 • Win vs Mac 注：⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

先要搞定什么？ !12 圣战⼀一场永⽆无⽌止境的战⽃斗 • Space vs Tab • Sass
vs Less • Emac vs Vim vs Sublime vs IDEA 等等 • Win vs Mac 注：⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

先要搞定什么？ !12 圣战⼀一场永⽆无⽌止境的战⽃斗 • Space vs Tab • Sass
vs Less • Emac vs Vim vs Sublime vs IDEA 等等 • BEM vs 嵌套 • Win vs Mac 注：⾼高亮⾊色为TmT⺫⽬目前选择⽅方案

0. 项⺫⽬目初始化 3. Less,Grunt 4. 调试&联调 2. HTML 编码 5.
发布&部署 1. 视觉稿切⽚片 TmT Workﬂow ⼤大纲 !13

发布&部署 1. 视觉稿切⽚片 TmT Workﬂow ⼤大纲 !13 ⽣生成⽂文件⺫⽬目录结构

发布&部署 1. 视觉稿切⽚片 TmT Workﬂow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图⽣生成⽂文件⺫⽬目录结构

发布&部署 1. 视觉稿切⽚片 TmT Workﬂow ⼤大纲 !13 1x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图类命名 | HTML层级⽣生成⽂文件⺫⽬目录结构

0. 项⺫⽬目初始化 !14 ../lib/ 模板源⽂文件

0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

Grunt-init ../lib/tmt/ 0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

0. 项⺫⽬目初始化 !15 ⾃自动化的完成初始化⽂文件

0. 项⺫⽬目初始化 !16 初始化后的 ../proj-apple/ 标准项⺫⽬目⽂文件

TmT 项⺫⽬目结构 !17 ../html/ ⺴⽹网⻚页构建结构

TmT 项⺫⽬目结构 !18 ../css/ CSS源⽂文件Less

TmT 项⺫⽬目结构 !19 ../img/ ⽆无需合并雪碧图的图⽚片素材

TmT 项⺫⽬目结构 !20 ../slice/ 需要被⾃自动合并雪碧图的切⽚片

TmT 项⺫⽬目结构 !21 ../publish/ 重构最终成品，待发布

TmT 项⺫⽬目结构 !22 ../doc/ 项⺫⽬目⽂文档相关

!23 1.视觉稿切⽚片结合移动端的切图特点期望值：

!23 1.视觉稿切⽚片 • 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：

!23 1.视觉稿切⽚片 • 同时切出 1x 和 2x • 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点
期望值：

!23 1.视觉稿切⽚片 • 同时切出 1x 和 2x • 奇数变偶数 •
最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：

最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图

最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值： • 切图成品不⽤用再次重命名如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图

!23 1.视觉稿切⽚片 • 由设计师来切图。 • 同时切出 1x 和 2x •
奇数变偶数 • 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值： • 切图成品不⽤用再次重命名如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图

!23 1.视觉稿切⽚片 • 由设计师来切图。 • 同时切出 1x 和 2x •
奇数变偶数 • 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点不要推托〜～亲期望值： • 切图成品不⽤用再次重命名如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图

!24 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图?

!24 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图? 视频演⽰示

!25 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图

!25 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图选中

!25 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图重! 命! 名选中

!25 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图导出重! 命! 名
选中

!25 1.视觉稿切⽚片如何快速搞定 Retina 2x 切图 1x! @2x! 奇数 ->
偶数

!26 1.视觉稿切⽚片结合移动端的切图特点输出结果： (14张图)

!26 1.视觉稿切⽚片结合移动端的切图特点输出结果： a.png [email protected] b.png … [email protected] …
(14张图)

2. HTML 编码如何快速搞定 HTML 结构问：写HTML时，以下选项中最痛苦的是什么？ !27

2. HTML 编码 • (1) 检查标签闭合如何快速搞定 HTML 结构问：写HTML时，以下选项中最痛苦的是什么？
!27

2. HTML 编码 • (2) 优化标签嵌套 • (1) 检查标签闭合如何快速搞定
HTML 结构问：写HTML时，以下选项中最痛苦的是什么？ !27

2. HTML 编码 • (2) 优化标签嵌套 • (3) 给 Class
命名 • (1) 检查标签闭合如何快速搞定 HTML 结构问：写HTML时，以下选项中最痛苦的是什么？ !27

2. HTML 编码 • (3) 给 Class 命名如何快速搞定 HTML
结构问：写HTML时，以下选项中最痛苦的是什么？ !27

结构问：写HTML时，以下选项中最痛苦的是什么？如果说，写HTML就像去旅游，那么最痛苦的便是给沿途的每⼀一座⼭山、每⼀一条河、每⼀一棵草都起⼀一个响亮的名字！ !27

结构问：写HTML时，以下选项中最痛苦的是什么？如果说，写HTML就像去旅游，那么最痛苦的便是给沿途的每⼀一座⼭山、每⼀一条河、每⼀一棵草都起⼀一个响亮的名字！别忘了我们是组团去旅游！ !27

2. HTML 编码引⼊入BEM的理念 !28

• Blocks (块) 设计或者布局的⼀一部分语义或者视觉上独⽴立 • Elements (元素) 块的⼦子元素 •
Modiﬁer (修饰符) ⼤大⼩小⻓长短状态 BEM !29 2. HTML 编码什么是BEM？

!29 2. HTML 编码什么是BEM？⼦子集 | 衍⽣生版

BEM for TmT !29 2. HTML 编码什么是BEM？⼦子集 |
衍⽣生版

2. HTML 编码 BEM for TmT 规范细则 !31

2. HTML 编码 BEM for TmT 规范细则 !31 • 1.
使⽤用 Block__Element_Modiﬁer 的结构

Class 名仅含1层，⽆无嵌套 • 1. 使⽤用 Block__Element_Modiﬁer 的结构

伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层，⽆无嵌套 • 1. 使⽤用 Block__Element_Modiﬁer 的结构

伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层，⽆无嵌套 • 5. 中横线连接名称单词 • 1. 使⽤用 Block__Element_Modiﬁer 的结构

伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层，⽆无嵌套 • 5. 中横线连接名称单词 • 1. 使⽤用 Block__Element_Modiﬁer 的结构 • 6. 双下划线连接⼦子元素

伪类/伪对象或控制⼦子元素状态可2层嵌套 • 2. Class 名仅含1层，⽆无嵌套 • 5. 中横线连接名称单词 • 1. 使⽤用 Block__Element_Modiﬁer 的结构 • 6. 双下划线连接⼦子元素 • 7. 单下划线连接元素和其状态或修饰符

2. HTML 编码运⽤用BEM理念的HTML和CSS !33

!34 2. HTML 编码移动端的HTML特性为什么选择 BEM：

!34 2. HTML 编码移动端的HTML特性为什么选择 BEM： • 团队统⼀一性、规范性

!34 2. HTML 编码移动端的HTML特性为什么选择 BEM： • 团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级

!34 2. HTML 编码移动端的HTML特性为什么选择 BEM： • 低耦合、甚⾄至⽆无耦合 •
团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级

团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用

移动终端友好 • 团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用

移动终端友好 • 团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用 CSS选择器⾃自右向左解析的特性

移动终端友好 • 团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用 CSS选择器⾃自右向左解析的特性 • 低端设备友好

移动终端友好 • 团队统⼀一性、规范性统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用 CSS选择器⾃自右向左解析的特性 • 低端设备友好选择器单层简单，渲染快速

!35 2. HTML 编码 BEM的性能：⾼高效

!35 2. HTML 编码 BEM的性能：⾼高效结论：

!35 2. HTML 编码 BEM的性能：⾼高效 • 单层类名⽐比嵌套类名Reﬂow快结论：

!35 2. HTML 编码 BEM的性能：⾼高效 • 低端机器差距⾮非常明显 • 单层类名⽐比嵌套类名Reﬂow快结论：

!35 2. HTML 编码 BEM的性能：⾼高效 • PC设备性能影响不⼤大 • 低端机器差距⾮非常明显 •
单层类名⽐比嵌套类名Reﬂow快结论：

!35 2. HTML 编码 BEM的性能：⾼高效 Use efﬁcient CSS selectors •
PC设备性能影响不⼤大 • 低端机器差距⾮非常明显 • 单层类名⽐比嵌套类名Reﬂow快结论：

!36 2. HTML 编码输出结果：

!36 2. HTML 编码输出结果： (HTML ⽂文件)

!37 3. Less,Grunt 移动端的CSS编码特性

!38 3. Less,Grunt import-reset.less 浏览器reset

!39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

!39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入复⽤用代码块

!39 3. Less,Grunt import-mixins.less 常⽤用代码⽚片段混⼊入

!40 3. Less,Grunt import-var.less 全局变量定义

!41 3. Less,Grunt import-base.less 基本标签相关

!42 3. Less,Grunt import-lay.less 布局相关

!43 3. Less,Grunt import-ui.less 控制UI相关的样式

!44 3. Less,Grunt ../css/style.less 出⼝口⽂文件，可以是多个

!45 3. Less,Grunt 什么是Grunt？

!45 3. Less,Grunt 什么是Grunt？ • ⼀一个基于NodeJS的任务运⾏行器

!45 3. Less,Grunt 什么是Grunt？ • 可实现编译|压缩|合并|打包|发布等⾃自动化流程 • ⼀一个基于NodeJS的任务运⾏行器

!46 3. Less,Grunt

!46 3. Less,Grunt 1. 编译 Less -> CSS

!46 3. Less,Grunt 2. 合并 Sprite ⾃自动⽣生成 2x 适配 1.
编译 Less -> CSS

编译 Less -> CSS Grunt-Sprite by Meterscao

编译 Less -> CSS ⼆二叉树算法 | ⾃自动合并雪碧图 | 计算坐标 Grunt-Sprite by Meterscao

!47 3. Less,Grunt Grunt Workﬂow v1.2

!47 3. Less,Grunt 3. 压缩 CSS Grunt Workﬂow v1.2

!47 3. Less,Grunt 3. 压缩 CSS YUI Compressor Grunt Workﬂow
v1.2

!47 3. Less,Grunt 3. 压缩 CSS 4. 压缩图⽚片 YUI
Compressor Grunt Workﬂow v1.2

!47 3. Less,Grunt 3. 压缩 CSS 4. 压缩图⽚片 YUI
Compressor PNG 8 Alpha Grunt Workﬂow v1.2

!47 3. Less,Grunt 3. 压缩 CSS 4. 压缩图⽚片 5.
监听⽂文件变动 YUI Compressor PNG 8 Alpha Grunt Workﬂow v1.2

!47 3. Less,Grunt 3. 压缩 CSS 4. 压缩图⽚片 5.
监听⽂文件变动 YUI Compressor PNG 8 Alpha 可以配合事件⾃自动刷新浏览器调试 Grunt Workﬂow v1.2

!48 3. Less,Grunt 只需要写切⽚片路径，其他⾃自动完成

!49 3. Less,Grunt ⾃自动合并雪碧图，计算坐标，适配Retina 2x

!50 3. Less,Grunt ⾃自动清除(微信)缓存，添加图⽚片时间戳，追加⽂文件时间戳

!51 3. Less,Grunt 压缩CSS⽂文件

!52 3. Less,Grunt 输出结果：

!52 3. Less,Grunt 输出结果： (Slice 切⽚片合并到)

!52 3. Less,Grunt 输出结果： (Slice 切⽚片合并到) (Less 编译到)

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 本地调试

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 • 本地调试 Chrome/Firefox 插件
| 强制浏览器设备宽度

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 Safari/Chrome USB 联调 |
Weinre 远程⻚页⾯面元素查看 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 • 环境仿真 Safari/Chrome USB
联调 | Weinre 远程⻚页⾯面元素查看 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 远程调试 • 环境仿真 Safari/Chrome USB
联调 | Weinre 远程⻚页⾯面元素查看 Xcode iOS模拟器 | Android SDK 虚拟机 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 真机实测 • 远程调试 • 环境仿真
Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看 Xcode iOS模拟器 | Android SDK 虚拟机 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

!53 4. 调试&联调根据项⺫⽬目的特点选择调试⽅方式 • 真机实测 • 远程调试 • 环境仿真
⼆二维码扫描 | Push Link to Phone Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看 Xcode iOS模拟器 | Android SDK 虚拟机 • 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度

!54 5. 发布&部署简化流程，降低操作成本

!54 5. 发布&部署简化流程，降低操作成本 • 执⾏行命令：grunt push

!54 5. 发布&部署简化流程，降低操作成本 • 执⾏行命令：grunt push 1. 将 Grunt
Workﬂow 中的成品⾃自动同步到 FTP

Workﬂow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布

Workﬂow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布 • 执⾏行命令：grunt zip

Workﬂow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布 • 执⾏行命令：grunt zip 1. 将 Grunt Workﬂow 中的成品 zip 打包

Workﬂow 中的成品⾃自动同步到 FTP 2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布 • 执⾏行命令：grunt zip 1. 将 Grunt Workﬂow 中的成品 zip 打包 2. 进⼀一步通过部署程序发布到公⺴⽹网环境

1. 视觉稿切⽚片 ! 2. HTML 编码 ! 3. Less,Grunt !
4. 调试&联调 ! 5. 发布&部署 !55 总结回顾⾼高效的，规范的，⾃自动化，流程化

4. 调试&联调 ! 5. 发布&部署 !55 总结回顾⾼高效的，规范的，⾃自动化，流程化 DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名

4. 调试&联调 ! 5. 发布&部署 !55 总结回顾⾼高效的，规范的，⾃自动化，流程化 DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名 BEM 规范化的：命名、层级

4. 调试&联调 ! 5. 发布&部署 !55 总结回顾⾼高效的，规范的，⾃自动化，流程化 DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名 BEM 规范化的：命名、层级⾃自动化：Less编译、合并雪碧图、压缩图⽚片&CSS

4. 调试&联调 ! 5. 发布&部署 !55 总结回顾⾼高效的，规范的，⾃自动化，流程化 DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名 BEM 规范化的：命名、层级⾃自动化：Less编译、合并雪碧图、压缩图⽚片&CSS 各种调试思路和逻辑

4. 调试&联调 ! 5. 发布&部署 !55 总结回顾⾼高效的，规范的，⾃自动化，流程化 DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名 BEM 规范化的：命名、层级⾃自动化：Less编译、合并雪碧图、压缩图⽚片&CSS 各种调试思路和逻辑⾃自动化的发布到内⺴⽹网&外⺴⽹网

!56 更多移动端思路 ? 开源、分享 https://github.com/mobile-team TmT http://tmt.io/ 资源参考⻅见末⻚页附录

!57 Thank You! ⻩黄⾃自⼒力 @hzlzh http://hzlzh.io/ (Zed Huang) Q&A

注：按前⽂文出现顺序归档注：所有解决⽅方案均⽀支持 Windows & Mac OS 平台 ! 2.DevRocket -
⾃自动化切图⼯工具 http://devrocket.uiparade.com/ 3.友盟指数 - 移动平台的设备概况 http://umindex.com/#ios_device 4.GeekBench 跑分数据 http://browser.primatelabs.com/ios-benchmarks 5.BEM官⺴⽹网 - 命名规范参考 http://bem.info/ 6.CSS Selectors - CSS 选择器效率测试 http://stevesouders.com/efws/css-selectors/class.php 7.Less官⺴⽹网 http://lesscss.org/ 8.Mixins.less 混⼊入Demo http://mixinsless.com/ 9.Grunt 官⺴⽹网 - 基于NodeJS的任务运⾏行器 http://gruntjs.com/ 10. Grunt插件: grunt-sprite - ⾃自动合并雪碧图 https://github.com/hellometers/grunt-sprite 11. 腾讯ecd 官⽅方博客 http://ecd.tencent.com/ 12. TmT on Github https://github.com/mobile-team 13. TmT Blog http://tmt.io! 14. @hzlzh Blog http://hzlzh.io/ !58 附录本Keynote提及到的资源汇总

[WebRebuild 2013] 移动终端重构Workflow

[WebRebuild 2013] 移动终端重构Workflow

More Decks by hzlzh

Other Decks in Technology

Featured

Transcript