WebRebuild 2013 介绍： http://webrebuild.org/2013/gz/guest.html 现场录像视频在线播放： http://www.56.com/u90/v_MTAwMTAyMTkx.html 完整版 Keynote 下载地址： http://vdisk.weibo.com/s/z9dGioP9NHK7H
移动终端重构 Workflow⻩黄⾃自⼒力 (@hzlzh)
View Slide
⾃自我介绍!2⻩黄⾃自⼒力@hzlzhhttp://hzlzh.io/(Zed Huang)
⾃自我介绍!2⻩黄⾃自⼒力@hzlzhhttp://hzlzh.io/(Zed Huang)• 腾讯 ecd - 移动终端设计中⼼心
⾃自我介绍!2⻩黄⾃自⼒力@hzlzhhttp://hzlzh.io/(Zed Huang)• 前端开发组(TmT)• 腾讯 ecd - 移动终端设计中⼼心
⾃自我介绍!2⻩黄⾃自⼒力@hzlzhhttp://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做快乐的开发者• ⼀一致性好
!4移动端的福利• ⽀支持度⾼高• 紧跟潮流• No IE全⾯面拥抱 HTML 5 + CSS 3新的特性和技术会迅速在浏览器更新，玩法多样⽆无需在意各种 IE hack做快乐的开发者• ⼀一致性好
!4移动端的福利• ⽀支持度⾼高• 紧跟潮流• No IE全⾯面拥抱 HTML 5 + CSS 3新的特性和技术会迅速在浏览器更新，玩法多样⽆无需在意各种 IE hack做快乐的开发者• ⼀一致性好 HTML5 ⻚页⾯面 | App(如: 微信) 内浏览器调⽤用App 内 hybrid ⻚页⾯面 | Web App
!5移动终端重构挑战总有兼容不完的新设备冒出来
!5移动终端重构挑战• 设备多• 屏幕⼩小总有兼容不完的新设备冒出来
!5移动终端重构挑战• 设备多• 屏幕⼩小 640x960 | 480x800总有兼容不完的新设备冒出来
!5移动终端重构挑战• 设备多• 屏幕⼩小4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!6移动终端重构挑战• 设备多• 屏幕⼩小4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!6移动终端重构挑战• 流量贵• 设备多• 屏幕⼩小4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!6移动终端重构挑战• 流量贵• ⺴⽹网速慢• 设备多• 屏幕⼩小4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!6移动终端重构挑战• 流量贵• ⺴⽹网速慢• 设备多• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!6移动终端重构挑战• 流量贵• ⺴⽹网速慢• 设备多• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB10 kb/s ~ 40 kb/s [2G⺴⽹网速]4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!7移动终端重构的挑战• 流量贵• ⺴⽹网速慢• 设备多• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB10 kb/s ~ 40 kb/s4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!7移动终端重构的挑战• 流量贵• ⺴⽹网速慢• 设备多• 更新快• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB10 kb/s ~ 40 kb/s4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!7移动终端重构的挑战• 性能变• 流量贵• ⺴⽹网速慢• 设备多• 更新快• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB10 kb/s ~ 40 kb/s4 -> 4s -> 5 -> 5s | Google Glass | iWatch640x960 | 480x800总有兼容不完的新设备冒出来
!7移动终端重构的挑战• 性能变• 流量贵• ⺴⽹网速慢• 设备多• 更新快• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB10 kb/s ~ 40 kb/s4 -> 4s -> 5 -> 5s | Google Glass | iWatchiOS 7 & Android 4.4 | Hybrid 内⻚页 & 微信内⻚页640x960 | 480x800总有兼容不完的新设备冒出来
!7移动终端重构的挑战• 性能变• 流量贵• ⺴⽹网速慢• 设备多• 更新快• 屏幕⼩小0.01元/KB 〜～ 0.03元/KB10 kb/s ~ 40 kb/s4 -> 4s -> 5 -> 5s | Google Glass | iWatchiOS 7 & Android 4.4 | Hybrid 内⻚页 & 微信内⻚页640x960 | 480x800设备性能跑分、GPU、CPU总有兼容不完的新设备冒出来
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快• 屏幕⼩小
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快• 屏幕⼩小 Viewport 缩放 | Retina 2x
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快图⽚片压缩 | Gzip | 请求合并 | CDN• 屏幕⼩小 Viewport 缩放 | Retina 2x
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快LazyLoad 按需加载、延时加载图⽚片压缩 | Gzip | 请求合并 | CDN• 屏幕⼩小 Viewport 缩放 | Retina 2x
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快LazyLoad 按需加载、延时加载Responsive Web Design (Location Response)图⽚片压缩 | Gzip | 请求合并 | CDN• 屏幕⼩小 Viewport 缩放 | Retina 2x
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快LazyLoad 按需加载、延时加载Responsive Web Design (Location Response)图⽚片压缩 | Gzip | 请求合并 | CDN新特性、新技术的使⽤用• 屏幕⼩小 Viewport 缩放 | Retina 2x
!8解决关键点• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快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团队为例
!9团队项⺫⽬目特点• 下游不同• 迭代快• 移动化• 跨平台• 产品线多接⼝口多个不同的下游开发团队产品开发周期短、快速响应95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）组员可随时穿插与各个项⺫⽬目之间，跨平台 Windows & Mac同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例
!9• 性能变• 流量贵• 设备多• ⺴⽹网速慢• 更新快• 屏幕⼩小团队项⺫⽬目特点• 下游不同• 迭代快• 移动化• 跨平台• 产品线多接⼝口多个不同的下游开发团队产品开发周期短、快速响应95%的移动终端项⺫⽬目（HTML5⻚页、App内⻚页、Hybird）组员可随时穿插与各个项⺫⽬目之间，跨平台 Windows & Mac同时多个产品线项⺫⽬目并发进⾏行以TmT团队为例
!10解决⽅方案移动终端重构的 Workflow
!10解决⽅方案移动终端重构的 WorkflowTmT Workflow
什么是TmT Workflow ?!11
什么是TmT Workflow ?!11• 它是⼀一组流程？
什么是TmT Workflow ?!11懒• 它是⼀一组流程？
• 它是⼀一套解决⽅方案？什么是TmT Workflow ?!11懒• 它是⼀一组流程？
• 它是⼀一套解决⽅方案？什么是TmT Workflow ?!11懒• 它是⼀一批⼯工具？• 它是⼀一组流程？
• 它是⼀一套解决⽅方案？什么是TmT Workflow ?!11懒• 它是⼀一批⼯工具？• 还是⼀一个模版？• 它是⼀一组流程？
• 它是⼀一套解决⽅方案？什么是TmT Workflow ?!11懒• 它是⼀一批⼯工具？• 还是⼀一个模版？• 它是⼀一种思路！• 它是⼀一组流程？
• 它是⼀一套解决⽅方案？什么是TmT Workflow ?!11Workflow• 它是⼀一批⼯工具？• 还是⼀一个模版？• 它是⼀一种思路！• 它是⼀一组流程？
先要搞定什么？!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,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!13
0. 项⺫⽬目初始化3. Less,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!13⽣生成⽂文件⺫⽬目录结构
0. 项⺫⽬目初始化3. Less,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!131x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图⽣生成⽂文件⺫⽬目录结构
0. 项⺫⽬目初始化3. Less,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!131x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图类命名 | HTML层级⽣生成⽂文件⺫⽬目录结构
0. 项⺫⽬目初始化3. Less,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!131x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图类命名 | HTML层级编译 | ⾃自动合并雪碧图 | 加时间戳⽣生成⽂文件⺫⽬目录结构
0. 项⺫⽬目初始化3. Less,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!131x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图类命名 | HTML层级编译 | ⾃自动合并雪碧图 | 加时间戳移动端的调试思路⽣生成⽂文件⺫⽬目录结构
0. 项⺫⽬目初始化3. Less,Grunt4. 调试&联调2. HTML 编码5. 发布&部署1. 视觉稿切⽚片TmT Workflow ⼤大纲!131x切图 | 2x切图 | 图⽚片压缩 | 拼合雪碧图类命名 | HTML层级编译 | ⾃自动合并雪碧图 | 加时间戳移动端的调试思路⾃自动化的发布流程⽣生成⽂文件⺫⽬目录结构
0. 项⺫⽬目初始化!14../lib/ 模板源⽂文件
0. 项⺫⽬目初始化!15⾃自动化的完成初始化⽂文件
Grunt-init ../lib/tmt/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/ 项⺫⽬目⽂文档相关
!231.视觉稿切⽚片结合移动端的切图特点期望值：
!231.视觉稿切⽚片• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：
!231.视觉稿切⽚片• 同时切出 1x 和 2x• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：
!231.视觉稿切⽚片• 同时切出 1x 和 2x• 奇数变偶数• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：
!231.视觉稿切⽚片• 同时切出 1x 和 2x• 奇数变偶数• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
!231.视觉稿切⽚片• 同时切出 1x 和 2x• 奇数变偶数• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：• 切图成品不⽤用再次重命名如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
!231.视觉稿切⽚片• 由设计师来切图。• 同时切出 1x 和 2x• 奇数变偶数• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点期望值：• 切图成品不⽤用再次重命名如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
!231.视觉稿切⽚片• 由设计师来切图。• 同时切出 1x 和 2x• 奇数变偶数• 最好只点击⼏几下，或者干脆不⽤用点结合移动端的切图特点不要推托〜～亲期望值：• 切图成品不⽤用再次重命名如：2x 原图 41x45 -> 42x46 -> 21x23 1x ⺫⽬目标图
!241.视觉稿切⽚片如何快速搞定 Retina 2x 切图?
!241.视觉稿切⽚片如何快速搞定 Retina 2x 切图?视频演⽰示
!251.视觉稿切⽚片如何快速搞定 Retina 2x 切图
!251.视觉稿切⽚片如何快速搞定 Retina 2x 切图选中
!251.视觉稿切⽚片如何快速搞定 Retina 2x 切图重!命!名选中
!251.视觉稿切⽚片如何快速搞定 Retina 2x 切图导出重!命!名选中
!251.视觉稿切⽚片如何快速搞定 Retina 2x 切图1x!@2x!奇数 -> 偶数
!261.视觉稿切⽚片结合移动端的切图特点输出结果：(14张图)
!261.视觉稿切⽚片结合移动端的切图特点输出结果：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
2. HTML 编码• (3) 给 Class 命名如何快速搞定 HTML 结构问：写HTML时，以下选项中最痛苦的是什么？如果说，写HTML就像去旅游，那么最痛苦的便是给沿途的每⼀一座⼭山、每⼀一条河、每⼀一棵草都起⼀一个响亮的名字！!27
2. HTML 编码• (3) 给 Class 命名如何快速搞定 HTML 结构问：写HTML时，以下选项中最痛苦的是什么？如果说，写HTML就像去旅游，那么最痛苦的便是给沿途的每⼀一座⼭山、每⼀一条河、每⼀一棵草都起⼀一个响亮的名字！别忘了我们是组团去旅游！!27
2. HTML 编码引⼊入BEM的理念!28
• Blocks (块) 设计或者布局的⼀一部分 语义或者视觉上独⽴立 • Elements (元素) 块的⼦子元素 • Modifier (修饰符) ⼤大⼩小 ⻓长短 状态BEM!292. HTML 编码什么是BEM？
!292. HTML 编码什么是BEM？⼦子集 | 衍⽣生版
BEM for TmT!292. HTML 编码什么是BEM？⼦子集 | 衍⽣生版
2. HTML 编码引⼊入BEM的理念!30
2. HTML 编码BEM for TmT 规范细则!31
2. HTML 编码BEM for TmT 规范细则!31• 1. 使⽤用 Block__Element_Modifier 的结构
2. HTML 编码BEM for TmT 规范细则!31• 2. Class 名仅含1层，⽆无嵌套• 1. 使⽤用 Block__Element_Modifier 的结构
2. HTML 编码BEM for TmT 规范细则!31• 3. 伪类/伪对象或控制⼦子元素状态可2层嵌套• 2. Class 名仅含1层，⽆无嵌套• 1. 使⽤用 Block__Element_Modifier 的结构
2. HTML 编码BEM for TmT 规范细则!31• 3. 伪类/伪对象或控制⼦子元素状态可2层嵌套• 2. Class 名仅含1层，⽆无嵌套• 5. 中横线连接名称单词• 1. 使⽤用 Block__Element_Modifier 的结构
2. HTML 编码BEM for TmT 规范细则!31• 3. 伪类/伪对象或控制⼦子元素状态可2层嵌套• 2. Class 名仅含1层，⽆无嵌套• 5. 中横线连接名称单词• 1. 使⽤用 Block__Element_Modifier 的结构• 6. 双下划线连接⼦子元素
2. HTML 编码BEM for TmT 规范细则!31• 3. 伪类/伪对象或控制⼦子元素状态可2层嵌套• 2. Class 名仅含1层，⽆无嵌套• 5. 中横线连接名称单词• 1. 使⽤用 Block__Element_Modifier 的结构• 6. 双下划线连接⼦子元素• 7. 单下划线连接元素和其状态或修饰符
2. HTML 编码引⼊入BEM的理念!32
2. HTML 编码运⽤用BEM理念的HTML和CSS!33
!342. HTML 编码移动端的HTML特性为什么选择 BEM：
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 团队统⼀一性、规范性
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 低耦合、甚⾄至⽆无耦合• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 低耦合、甚⾄至⽆无耦合• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 低耦合、甚⾄至⽆无耦合• 移动终端友好• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 低耦合、甚⾄至⽆无耦合• 移动终端友好• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用CSS选择器⾃自右向左解析的特性
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 低耦合、甚⾄至⽆无耦合• 移动终端友好• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用CSS选择器⾃自右向左解析的特性• 低端设备友好
!342. HTML 编码移动端的HTML特性为什么选择 BEM：• 低耦合、甚⾄至⽆无耦合• 移动终端友好• 团队统⼀一性、规范性 统⼀一的Class命名⻛风格和嵌套层级跨项⺫⽬目的复⽤用，如A项⺫⽬目的搜索框在B项⺫⽬目调⽤用CSS选择器⾃自右向左解析的特性• 低端设备友好 选择器单层简单，渲染快速
!352. HTML 编码BEM的性能：⾼高效
!352. HTML 编码BEM的性能：⾼高效结论：
!352. HTML 编码BEM的性能：⾼高效• 单层类名⽐比嵌套类名Reflow快结论：
!352. HTML 编码BEM的性能：⾼高效• 低端机器差距⾮非常明显• 单层类名⽐比嵌套类名Reflow快结论：
!352. HTML 编码BEM的性能：⾼高效• PC设备性能影响不⼤大• 低端机器差距⾮非常明显• 单层类名⽐比嵌套类名Reflow快结论：
!352. HTML 编码BEM的性能：⾼高效Use efficient CSS selectors• PC设备性能影响不⼤大• 低端机器差距⾮非常明显• 单层类名⽐比嵌套类名Reflow快结论：
!362. HTML 编码输出结果：
!362. HTML 编码输出结果：(HTML ⽂文件)
!373. Less,Grunt移动端的CSS编码特性
!383. Less,Gruntimport-reset.less 浏览器reset
!393. Less,Gruntimport-mixins.less 常⽤用代码⽚片段混⼊入
!393. Less,Gruntimport-mixins.less 常⽤用代码⽚片段混⼊入复⽤用代码块
!403. Less,Gruntimport-var.less 全局变量定义
!413. Less,Gruntimport-base.less 基本标签相关
!423. Less,Gruntimport-lay.less 布局相关
!433. Less,Gruntimport-ui.less 控制UI相关的样式
!443. Less,Grunt../css/style.less 出⼝口⽂文件，可以是多个
!453. Less,Grunt什么是Grunt？
!453. Less,Grunt什么是Grunt？• ⼀一个基于NodeJS的任务运⾏行器
!453. Less,Grunt什么是Grunt？• 可实现编译|压缩|合并|打包|发布等⾃自动化流程• ⼀一个基于NodeJS的任务运⾏行器
!463. Less,Grunt
!463. Less,Grunt1. 编译 Less -> CSS
!463. Less,Grunt2. 合并 Sprite ⾃自动⽣生成 2x 适配1. 编译 Less -> CSS
!463. Less,Grunt2. 合并 Sprite ⾃自动⽣生成 2x 适配1. 编译 Less -> CSSGrunt-Sprite by Meterscao
!463. Less,Grunt2. 合并 Sprite ⾃自动⽣生成 2x 适配1. 编译 Less -> CSS⼆二叉树算法 | ⾃自动合并雪碧图 | 计算坐标Grunt-Sprite by Meterscao
!473. Less,GruntGrunt Workflow v1.2
!473. Less,Grunt3. 压缩 CSSGrunt Workflow v1.2
!473. Less,Grunt3. 压缩 CSSYUI CompressorGrunt Workflow v1.2
!473. Less,Grunt3. 压缩 CSS4. 压缩 图⽚片YUI CompressorGrunt Workflow v1.2
!473. Less,Grunt3. 压缩 CSS4. 压缩 图⽚片YUI CompressorPNG 8 AlphaGrunt Workflow v1.2
!473. Less,Grunt3. 压缩 CSS4. 压缩 图⽚片5. 监听 ⽂文件变动YUI CompressorPNG 8 AlphaGrunt Workflow v1.2
!473. Less,Grunt3. 压缩 CSS4. 压缩 图⽚片5. 监听 ⽂文件变动YUI CompressorPNG 8 Alpha可以配合事件⾃自动刷新浏览器调试Grunt Workflow v1.2
!483. Less,Grunt只需要写切⽚片路径，其他⾃自动完成
!493. Less,Grunt⾃自动合并雪碧图，计算坐标，适配Retina 2x
!503. Less,Grunt⾃自动清除(微信)缓存，添加图⽚片时间戳，追加⽂文件时间戳
!513. Less,Grunt压缩CSS⽂文件
!523. Less,Grunt输出结果：
!523. Less,Grunt输出结果：(Slice 切⽚片合并到)
!523. Less,Grunt输出结果：(Slice 切⽚片合并到)(Less 编译到)
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 本地调试
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 远程调试• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 远程调试 Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 远程调试• 环境仿真Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 远程调试• 环境仿真Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看Xcode iOS模拟器 | Android SDK 虚拟机• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 真机实测• 远程调试• 环境仿真Safari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看Xcode iOS模拟器 | Android SDK 虚拟机• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!534. 调试&联调根据项⺫⽬目的特点选择调试⽅方式• 真机实测• 远程调试• 环境仿真⼆二维码扫描 | Push Link to PhoneSafari/Chrome USB 联调 | Weinre 远程⻚页⾯面元素查看Xcode iOS模拟器 | Android SDK 虚拟机• 本地调试 Chrome/Firefox 插件 | 强制浏览器设备宽度
!545. 发布&部署简化流程，降低操作成本
!545. 发布&部署简化流程，降低操作成本• 执⾏行命令：grunt push
!545. 发布&部署简化流程，降低操作成本• 执⾏行命令：grunt push1. 将 Grunt Workflow 中的成品⾃自动同步到 FTP
!545. 发布&部署简化流程，降低操作成本• 执⾏行命令：grunt push1. 将 Grunt Workflow 中的成品⾃自动同步到 FTP2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布
!545. 发布&部署简化流程，降低操作成本• 执⾏行命令：grunt push1. 将 Grunt Workflow 中的成品⾃自动同步到 FTP2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布• 执⾏行命令：grunt zip
!545. 发布&部署简化流程，降低操作成本• 执⾏行命令：grunt push1. 将 Grunt Workflow 中的成品⾃自动同步到 FTP2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布• 执⾏行命令：grunt zip1. 将 Grunt Workflow 中的成品 zip 打包
!545. 发布&部署简化流程，降低操作成本• 执⾏行命令：grunt push1. 将 Grunt Workflow 中的成品⾃自动同步到 FTP2. 进⼀一步完成 Gamma | Beta | IDC 环境的发布• 执⾏行命令：grunt zip1. 将 Grunt Workflow 中的成品 zip 打包2. 进⼀一步通过部署程序发布到公⺴⽹网环境
1. 视觉稿切⽚片!2. HTML 编码!3. Less,Grunt!4. 调试&联调!5. 发布&部署!55总结回顾⾼高效的，规范的，⾃自动化，流程化
1. 视觉稿切⽚片!2. HTML 编码!3. Less,Grunt!4. 调试&联调!5. 发布&部署!55总结回顾⾼高效的，规范的，⾃自动化，流程化DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名
1. 视觉稿切⽚片!2. HTML 编码!3. Less,Grunt!4. 调试&联调!5. 发布&部署!55总结回顾⾼高效的，规范的，⾃自动化，流程化DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名BEM 规范化的：命名、层级
1. 视觉稿切⽚片!2. HTML 编码!3. Less,Grunt!4. 调试&联调!5. 发布&部署!55总结回顾⾼高效的，规范的，⾃自动化，流程化DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名BEM 规范化的：命名、层级⾃自动化：Less编译、合并雪碧图、压缩图⽚片&CSS
1. 视觉稿切⽚片!2. HTML 编码!3. Less,Grunt!4. 调试&联调!5. 发布&部署!55总结回顾⾼高效的，规范的，⾃自动化，流程化DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名BEM 规范化的：命名、层级⾃自动化：Less编译、合并雪碧图、压缩图⽚片&CSS各种调试思路和逻辑
1. 视觉稿切⽚片!2. HTML 编码!3. Less,Grunt!4. 调试&联调!5. 发布&部署!55总结回顾⾼高效的，规范的，⾃自动化，流程化DevRocket ⾼高效的完成：2x切⽚片、偶数化、命名BEM 规范化的：命名、层级⾃自动化：Less编译、合并雪碧图、压缩图⽚片&CSS各种调试思路和逻辑⾃自动化的发布到内⺴⽹网&外⺴⽹网
!56更多移动端思路 ?开源、分享https://github.com/mobile-teamTmThttp://tmt.io/资源参考⻅见末⻚页附录
!57Thank You!⻩黄⾃自⼒力@hzlzhhttp://hzlzh.io/(Zed Huang)Q&A
注：按前⽂文出现顺序归档注：所有解决⽅方案均⽀支持 Windows & Mac OS 平台!2.DevRocket - ⾃自动化切图⼯工具 http://devrocket.uiparade.com/3.友盟指数 - 移动平台的设备概况 http://umindex.com/#ios_device4.GeekBench 跑分数据 http://browser.primatelabs.com/ios-benchmarks5.BEM官⺴⽹网 - 命名规范参考 http://bem.info/6.CSS Selectors - CSS 选择器效率测试 http://stevesouders.com/efws/css-selectors/class.php7.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-sprite11. 腾讯ecd 官⽅方博客 http://ecd.tencent.com/12. TmT on Github https://github.com/mobile-team13. TmT Blog http://tmt.io!14. @hzlzh Blog http://hzlzh.io/!58附录本Keynote提及到的资源汇总
hzlzh
bengo4com
picardparis
wernerkrauss
torounit
mongolyy
minorun365
gawa
murahigeas
nagix
tkmnzm
nishiharatsubasa
isaoshimizu
frogandcode
mthomps
marcduiker
rasmusluckow
jponch
eitanlees
lauravandoore
chriscoyier
zakiyama
soudai
keithpitt
mclloyd