kissy-pie 零配置打包

基于目录规范，并促进目录规范化推广；一套免配置， 易扩展， 高度自动化，友好界面的前端构建框架；

Transcript

1. 管理，构建你的前端应⽤用 12年7月31⽇日星期⼆二
2. 遇春 - 组织⺫⽬目录结构规范的讨论 剑平 - ⽂文档 推⼲⼴广 张挺 - tbuild 紫英 - css-combo tbuild 维护与升级 ⽂文⻰龙 - kissy-pie ⼯工具开发 12年7月31⽇日星期⼆二
3. 前端打包痛点 • 没有规范是协作噩梦 • 前端代码复杂度增加，⺫⽬目录结构如何分 层, ⼊入⼝口在哪？ • 质量，稳定性要求越来越⾼高 • 基于Ant的打包，build.xml 难于管理 • 代码打包之后不易调试 • 编码问题 与工具的兼容性 12年7月31⽇日星期⼆二
4. 解决之道 12年7月31⽇日星期⼆二
5. ⼤大量实践 + ⼩小组讨论 + 跨业务线沟通 12年7月31⽇日星期⼆二
6. 我们总结出⼀一套 适⽤用于Kissy 2.0 + 前端⺫⽬目录结构规范 12年7月31⽇日星期⼆二
7. 应⽤用 12年7月31⽇日星期⼆二
8. 12年7月31⽇日星期⼆二
9. 应⽤用 • 抽离出公共部分 Common • 再以⻚页⾯面为维度，拆成Page • 被Page所依赖的，Utils • Page是打包的单位 12年7月31⽇日星期⼆二
10. Page 12年7月31⽇日星期⼆二
11. 12年7月31⽇日星期⼆二
12. Page • 时间戳⺫⽬目录 （发布⺫⽬目录） • 版本⺫⽬目录 （源⺫⽬目录） • Kissy 包配置 • evn.js 环境切换，包配置脚本 12年7月31⽇日星期⼆二
13. 12年7月31⽇日星期⼆二
14. Kissy Pie 12年7月31⽇日星期⼆二
15. ⼊入⼝口⽂文件 • ⽂文件的位置 • ⽂文件的扩展名 • .js • .css • -min.js • .tpl.html • .less 12年7月31⽇日星期⼆二
16. 编码处理 • 打包过程中使⽤用UTF-8编码 • 开始打包时源码转成utf-8 • 结束打包时转成⺫⽬目标代码 • 在fb.json和fb.page.json⾥里⾯面配置编码 12年7月31⽇日星期⼆二
17. 打包 • tbuild: Kissy 1.2.0 模块依赖分析 • css-combo 分析@import • lesscss @import 语法 • kissy-template: xx.tpl.html > xx.tpl.js 12年7月31⽇日星期⼆二
18. 压缩 • cssmin (node version YUI Compressor） • uglifyjs 12年7月31⽇日星期⼆二
19. 代码质量 • csslint CSS语法校验 12年7月31⽇日星期⼆二
20. 其它可以考虑的扩展 • 测试 • ⽂文档 • 流程 • jsLint 12年7月31⽇日星期⼆二
21. Get Started 12年7月31⽇日星期⼆二
22. $npm install kissy-pie -g 12年7月31⽇日星期⼆二
23. Command Line 12年7月31⽇日星期⼆二
24. ki Command Line 12年7月31⽇日星期⼆二
25. 基本命令 • ki init • ki add pagea/2.0 • ki build pagea/2.0 -t 20121212 • ki build common 12年7月31⽇日星期⼆二
26. 批量打包功能 • ki group set all page1/1.0 page2/1.0 • ki build all -t 20121212 12年7月31⽇日星期⼆二
27. ⺫⽬目录监控功能 ki build homepage/1.0 -t 20121212 --watch 12年7月31⽇日星期⼆二
28. one more thing 12年7月31⽇日星期⼆二
29. ki web 127.0.0.1:8765 12年7月31⽇日星期⼆二
30. 12年7月31⽇日星期⼆二
31. 12年7月31⽇日星期⼆二