Hello Xcake

KISSY build right

Transcript

1. hello, XCake new KISSY, new builder
2. 有奖问题 • XCake 上⼀一代的⺫⽬目录规范叫什么 • KPC 是什么东⻄西
3. ⼤大纲 • KISSY 模块化基础 • XCake 规范介绍 • XCake ⼯工具介绍
4. KISSY 模块化基础
5. 定义模块 • AMD 语法 • CMD 语法
6. AMD KISSY.add(function(S,  a,  b){     //  code  here   },  {     requires:  [‘x/a’,  ‘x/b’]   }); KISSY.add(function(S,  require){      var  a  =  require(‘x/a’);      var  b  =  require(‘x/b’);   }); CMD
7. 定义模块关系 • require 静态依赖 • use 动态加载 / 懒加载
8. 模块分类 CSS JS TPL
9. 组件 CSS JS TPL
10. define：XCake • 是⼀一套⾯面向KISSY 1.4.x 前端开发规范, 包含 • 组织⽂文件⽅方案 • 代码调试⽅方案 • 编译⽅方案
11. XCake ⺫⽬目标： ! • 简单到极致 • 易⽤用到极致 • 快到极致
12. 淘宝⺫⽬目录结构规范 发展史 kissy-pie kissy-cake XCake clam
13. Kissy Pie common pages utils use
14. common utils widget Kissy Cake pages use
15. widget XCake pages use components
16. 再继续优化 components pages c p
17. .   ├──  build   └──  src          ├──  c          │      └──  slider          │              ├──  mods          │              │      └──  mod1.js          │              ├──  tpl          │              │      └──  main.xtpl.js          │              ├──  index.js          │              └──  index.css          └──  p                  ├──  detail                  │      ├──  index.js                  │      └──  index.css                  └──  list                          ├──  index.js                          └──  index.css
18. KISSY 编译⽅方案 ⽂文件合并 在线Combo
19. ⽂文件合并 在线Combo • 线下合并模块 • 不够灵活 • 线下⽣生成 map • 灵活，模块⾃自由组合 • URL 过⻓长问题 http://g.tbcdn.cn/kissy/k/1.4.0/??node-min.js,dom/base-min.js,event/dom/base- min.js,event/base-min.js,event/dom/shake-min.js,event/dom/focusin-min.js,anim- min.js,anim/base-min.js,promise-min.js,anim/timer-min.js,anim/transition-min.js,event- min.js,event/custom-min.js,io-min.js,cookie-min.js?t=-3329247292.js
20. ⽂文件合并 在线Combo
21. KPC
22. p c c c c
23. p c c c c
24. p c c c c
25. .   ├──  build   └──  src          ├──  c          │      └──  slider          │              ├──  mods          │              │      └──  mod1.js          │              ├──  index.js          │              └──  index.css          └──  p                  ├──  detail                  │      ├──  index.js                  │      └──  index.css                  └──  list                          ├──  index.js                          └──  index.css
26. .   ├──  build   └──  src          ├──  c          │      └──  slider          │              ├──  mods          │              │      └──  mod1.js          │              ├──  index.js          │              └──  index.css          └──  p                  ├──  detail                  │      ├──  index.js                  │      └──  index.css                  └──  list                          ├──  index.js                          └──  index.css 标记⼊入⼝口⽂文件 ['p/*/*.js', 'c/*/*.js']
27. .   ├──  build   └──  src          ├──  c          │      └──  slider          │              ├──  mods          │              │      └──  mod1.js          │              ├──  index.js          │              └──  index.css          └──  p                  ├──  detail                  │      ├──  index.js                  │      └──  index.css                  └──  list                          ├──  index.js                          └──  index.css 基于⼊入⼝口⽂文件的合并 .   ├──  build   │      ├──  c   │      │      └──  slider   │      │              ├──  index.js  (+mod1.js)   │      │              └──  index.css   │      └──  p   │              ├──  detail   │              │      ├──  index.js   │              │      └──  index.css   │              └──  list   │                      ├──  index.js   │                      └──  index.css   └──  src  
28. .   ├──  build   │      ├──  c   │      │      └──  slider   │      │              ├──  index.js  (+mod1.js)   │      │              └──  index.css   │      └──  p   │              ├──  detail   │              │      ├──  index.js   │              │      └──  index.css   │              └──  list   │                      ├──  index.js   │                      └──  index.css   └──  src   .   ├──  build   │      ├──  _1.js  (c/slider/index)   │      ├──  _2.js  (p/detail/index)   │      ├──  _3.js  (p/list/index)   │      └──  deps.js   └──  src   扁平化
29. alias x/c/slider/index x/p/detail/index x/p/list/index x/_1 x/_1 x/_3 alias alias alias
30. ??p/list/index.js,c/slide/index.js ??_1.js,_2.js Result：
31. Rethink CSS
32. 之前 @import(‘./slider.less’);   @import(‘./header.less’);   @import(‘./footer.less’);   @import(‘./box.less’); index.less
33. KISSY.add(function(S,  require){     require(‘./skin.css’);         var  box  =  require(‘x/box’);   }); 之后 slider/index.js
34. 好处 • 依赖关系统⼀一 • CDN Combo • 没有闪屏 • 模块内聚
35. 合在⼀一起
41. ⼯工具
42. http://def.taobao.net
43. def-yo def-reflect def-build def-gulp
44. def xcake init def xcake add def xcake dev
45. demo time
46. 总结 推荐 CMD 语法 推荐使⽤用 KISSY 管理 CSS 依赖 推荐使⽤用 线上 Combo （with KPC）
47. 总结 使⽤用 def-xcake def-reflect demo 开发服务器 ⽀支持 live-reload
48. 感谢 • 剑平 • 灵⽟玉 • 莫痕
49. Thank you