Skip to content

Quick Start

Jump to bottom Edit New page
neekey edited this page Oct 8, 2013 · 4 revisions

安装

$ npm install yo grunt-cli generator-kissy-cake -g

KISSY-Cake主要由Yeoman和Grunt两部分组成:

  • yo: 为yeoman的命令行工具
  • grunt-cli: 为grunt的全局命令行工具
  • generator-kissy-cake: 是yeoman的generator（生成器）的一种，类似目录模板，通过yeoman对generator的调用，帮助用户创建特定结构的目录。

初始化

$ cd your/project/path
$ yo kissy-cake

KISSY-Cake会根据你问题的回答，帮你创建特定的目录结构，创建的目录结构大体如下：

├── build
├── src
│   ├── common
│   │   └── package-config.js
│   ├── pages
│   ├── utils
│   └── widget
├── Gruntfile.js
├── abc.json
└── package.json

关于目录结构的细节参考KISSY Cake目录规范详解，这边说明下几个和grunt相关的文件:

  • Gruntfile.js：grunt任务的配置文件，设置了grunt可以提供的和打包相关的所有命令。
  • package.json：npm的模块描述文件，用来标明grunt执行的任务需要的模块依赖（比如你使用compass，那么就会多一个grunt-contrib-compass模块的依赖）
  • abc.json：ABC抽象出来的配置文件，用户可以在该文件中对打包功能等进行一定的配置。

以上三个文件中，对于一般用户来说，只需要根据需要修改abc.json即可，另外两个文件不推荐手动修改，且随着KISSY-Cake的版本更新，每一次更新后需要重新初始化（yo kissy-cake）项目，这两个文件也会做相应的升级。

另外你会发现目录中还增加了一个node_modules文件夹，该文件是yo帮我们执行了npm install的结构，所有在package.json中指定的模块都会被安装到该目录下。注意：不要将node_modules添加到git中

新建一个开发分支

$ grunt newbranch

上面的命令创建一个新的分支，它的默认规则是在第二位版本号上加一，如: 0.2.5 --> 0.3.0。可以添加--pitch来让最后一位加一，或者用--major来让第一位加一。

查看：git操作集成详细说明和为什么默认使用第二位

新建页面和组件

新建页面：

$ yo kissy-cake:page

新建组件

$ yo kissy-cake:widget

打包

最简单的全站打包：

$ grunt

或者

$ grunt all

也可以只打包想要打包的内容，可以通过abc.json来进行配置：

{
    ...
    "_kissy_cake": {
        "styleEngine": "sass",
        "defaults": {
            "pages": [],
            "widgets": [ "task_list" ]
        }
    }
    ...
}

通过其中的 _kissy_cake.defaults 来设置要打包的page和widget，设置完成后你可以通过以下方式打包：

$ grunt page // 打包abc.json中指定的page
$ grunt widget // 打包abc.json中指定的widget
$ grunt build // 打包abc.json中指定的page和widget

在页面中引入和执行脚本

注意到，在项目初始化过程中，自动生成了一个名为src/common/package-config.js的文件，该文件中与定义了ABC相关的对KISSY包的封装和配置的方法，在页面中要引入和使用你编写的模块，首先需要进行配置。

引入KISSY和配置文件

  • 引入KISSY
  • 引入build/common/package-config.js
  • 使用package-config提供的ABC.config方法配置页面
  • 开始使用KISSY.use('page/init')

ABC.config 使用说明

ABC.config 主要用于 配置Cake中涉及到的 KISSY包。

主要参数

  • pageName 页面的名字(通过 grunt page 添加页面时输入的页面名称)
  • pub Gitlab发布版本，如：0.3.10
  • path Gitlab 发布路路径url中版本号之前的路径，如：http://gitlab.taobao.ali.com/tb/jury

其他的 KISSY 包配置时的参数，比如tag, charset 都是支持的。例子：

<script src="http://g.tbcdn.cn/kissy/k/1.3.1/seed-min.js"></script>
<script src="http://g.tbcdn.cn/myGroup/myRepo/0.0.1/common/package-config.js"></script>
<script>
    ABC.config({
        pub:'0.0.1', //发布版本
        path:"http://g.tbcdn.cn/myGroup/myRepo/",
        pageName:"home"
    });
</script>

<script>

// 引入common中的header
KISSY.use('common/header');
// 引入home页面的初始化脚本
KISSY.use('page/init');
</script>

发布

可以直接通过命令进行发布

$ grunt prepub // push daily/0.2.3
$ grunt pub // push publish/0.2.3
Add a custom footer
Add a custom sidebar

Clone this wiki locally