Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
kissy-pie 零配置打包
Search
d2forum
August 03, 2012
1
210
kissy-pie 零配置打包
基于目录规范,并促进目录规范化推广;一套免配置, 易扩展, 高度自动化,友好界面的前端构建框架;
d2forum
August 03, 2012
Tweet
Share
More Decks by d2forum
See All by d2forum
TMS的PHP特性
d2forum
0
1.5k
Leap Motion体感实战
d2forum
0
1.2k
跨终端产品实践
d2forum
12
1.9k
Touching Future—s01-e01
d2forum
2
880
KissyCake
d2forum
3
730
贡献标准.s01.e02
d2forum
3
1.3k
一淘响应式设计实践
d2forum
10
950
响应式web设计与实现介绍
d2forum
8
780
定制版设计开发vs响应式设计开发
d2forum
0
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
217
8.6k
GitHub's CSS Performance
jonrohan
1025
450k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Designing for Performance
lara
601
67k
Designing Experiences People Love
moore
136
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
How to Ace a Technical Interview
jacobian
273
22k
Bash Introduction
62gerente
605
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Happy Clients
brianwarren
92
6.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
How STYLIGHT went responsive
nonsquared
92
4.9k
Transcript
管理,构建你的前端应⽤用 12年7月31⽇日星期⼆二
遇春 - 组织⺫⽬目录结构规范的讨论 剑平 - ⽂文档 推⼲⼴广 张挺 - tbuild
紫英 - css-combo tbuild 维护与升级 ⽂文⻰龙 - kissy-pie ⼯工具开发 12年7月31⽇日星期⼆二
前端打包痛点 • 没有规范是协作噩梦 • 前端代码复杂度增加,⺫⽬目录结构如何分 层, ⼊入⼝口在哪? • 质量,稳定性要求越来越⾼高 •
基于Ant的打包,build.xml 难于管理 • 代码打包之后不易调试 • 编码问题 与工具的兼容性 12年7月31⽇日星期⼆二
解决之道 12年7月31⽇日星期⼆二
⼤大量实践 + ⼩小组讨论 + 跨业务线沟通 12年7月31⽇日星期⼆二
我们总结出⼀一套 适⽤用于Kissy 2.0 + 前端⺫⽬目录结构规范 12年7月31⽇日星期⼆二
应⽤用 12年7月31⽇日星期⼆二
12年7月31⽇日星期⼆二
应⽤用 • 抽离出公共部分 Common • 再以⻚页⾯面为维度,拆成Page • 被Page所依赖的,Utils • Page是打包的单位
12年7月31⽇日星期⼆二
Page 12年7月31⽇日星期⼆二
12年7月31⽇日星期⼆二
Page • 时间戳⺫⽬目录 (发布⺫⽬目录) • 版本⺫⽬目录 (源⺫⽬目录) • Kissy 包配置
• evn.js 环境切换,包配置脚本 12年7月31⽇日星期⼆二
12年7月31⽇日星期⼆二
Kissy Pie 12年7月31⽇日星期⼆二
⼊入⼝口⽂文件 • ⽂文件的位置 • ⽂文件的扩展名 • .js • .css •
-min.js • .tpl.html • .less 12年7月31⽇日星期⼆二
编码处理 • 打包过程中使⽤用UTF-8编码 • 开始打包时源码转成utf-8 • 结束打包时转成⺫⽬目标代码 • 在fb.json和fb.page.json⾥里⾯面配置编码 12年7月31⽇日星期⼆二
打包 • tbuild: Kissy 1.2.0 模块依赖分析 • css-combo 分析@import •
lesscss @import 语法 • kissy-template: xx.tpl.html > xx.tpl.js 12年7月31⽇日星期⼆二
压缩 • cssmin (node version YUI Compressor) • uglifyjs 12年7月31⽇日星期⼆二
代码质量 • csslint CSS语法校验 12年7月31⽇日星期⼆二
其它可以考虑的扩展 • 测试 • ⽂文档 • 流程 • jsLint 12年7月31⽇日星期⼆二
Get Started 12年7月31⽇日星期⼆二
$npm install kissy-pie -g 12年7月31⽇日星期⼆二
Command Line 12年7月31⽇日星期⼆二
ki Command Line 12年7月31⽇日星期⼆二
基本命令 • ki init • ki add pagea/2.0 • ki
build pagea/2.0 -t 20121212 • ki build common 12年7月31⽇日星期⼆二
批量打包功能 • ki group set all page1/1.0 page2/1.0 • ki
build all -t 20121212 12年7月31⽇日星期⼆二
⺫⽬目录监控功能 ki build homepage/1.0 -t 20121212 --watch 12年7月31⽇日星期⼆二
one more thing 12年7月31⽇日星期⼆二
ki web 127.0.0.1:8765 12年7月31⽇日星期⼆二
12年7月31⽇日星期⼆二
12年7月31⽇日星期⼆二