KissyPie是面向前端的自动化开发环境。
- 能帮助你初始化,检查,打包,压缩你的前端代码(包括css, js, less);
- 基于一套目录结构规范, 特点是:
- 模块化(Kissy Module Compile, Css-Combo, Less 的引入, 提供高度模块化支持)
- 可括展性 (将应用拆分为Page, 方便应用的扩展)
- 适度灵活 (Common目录可直接引用)
- 可复用, 应用的 Utils 目录提供跨Page的代码可复用, CommonLib 提供跨应用的代码复用
- 安全性,发布基于时间戳目录提供了与后端的解耦, 以Page为单位可隔离风险。
- 友好的交互界面, 快速的打包
是时候和Ant说再见了!
- 基于 kissy1.2+ 的新项目或新应用
- 将你的老应用迁移至 Kissy Pie
- 首先安装或升级 Node.js (0.8.x) http://nodejs.org/
- 命令行执行
npm install kissy-pie -g
安装 - done!
- 进入你应用的 Assets目录, 执行命令
ki init
- 命令行执行
ki web
打开可视化界面, 或使用命令行工具 - enjoy!
- npm update kissy-pie -g
- done!
你可以通过界面或命令行来使用 Kissy Pie
你可以在命令行中使用 ki web
来启动基于浏览器的可视界面。
<td>创建一个Page或版本</td>
<td><code>ki add home/1.0</code></td>
</tr>
<tr>
<td>build</td>
<td>打包一个版本到时间戳目录</td>
<td>
<code>ki build samplepage/1.0 -t 20121221</code><br>
打包一个Page<br><br>
<code>ki build samplepage/1.0 samplepage2/1.0 -t 20121221</code><br>
打包多个page<br><br>
<code>ki build samplepage/1.0</code><br>
不指定timestamp 打包到最近的一次打包使用的时间戳<br><br>
<code>ki build samplepage/1.0 -t 20121221 -w</code><br>
加参数<code>-w</code> 或 <code>--watch</code> 可以监视目录变更, 代码有更新会自动打包<br><br>
<code>ki build common</code><br>
打包Common目录<br><br>
</td>
</tr>
<tr>
<td>group</td>
<td>
将多个Page加入一个组可以方便的批量打包到一个时间戳。
</td>
<td>
<code>ki group set front home/1.0 about/1.0 </code><br>
设置一个 'front' 组<br><br>
<code>ki group add front home/1.0 about/1.0</code><br>
添加Page到现有的'front'组<br><br>
<code>ki group list|show front</code><br>
显示 'front' 组<br><br>
<code>ki group</code><br>
显示所有的组<br><br>
<code>ki group build front -t 20121221</code><br>
打包 'front' 组到时间戳<br><br>
<code>ki group rm front</code><br>
删除 'front' 组<br><br>
</td>
</tr>
</tbody>
命令 | 简介 | 示例 |
init | 初始化一个应用, 请在应用Assets根目录下执行。 | ki init |
update | 更新或修复你的当前应用 | ki update |
web | 开启本地Web服务器,从浏览器访问 http://127.0.0.1:8765 可在一个可视化界面里面执行常用的操作,如打包,添加新的Page或Version等。 如果在应用目录下执行, 可直达当前应用。 |
ki web |
add |
- 《使用Kissy Pie快速构建—kissy1.2最佳实践探索》
- css-combo https://github.com/daxingplay/css-combo
- iconv-lite https://github.com/ashtuchkin/iconv-lite
- tbuild https://github.com/czy88840616/tbuild
- less.js http://lesscss.org
- cssmin
- uglifyjs https://github.com/mishoo/UglifyJS
- csslint http://csslint.net
- expressjs http://expressjs.org
- node 0.8.x +
- window xp +
- OSX 10.7 +