Skip to content

kissy简单工程构建器,强调简单和快速,没有复杂的工程分级和复杂的命令功能。

Notifications You must be signed in to change notification settings

kissyteam/generator-bee

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

http://gtms04.alicdn.com/tps/i4/T1i9hTFpBnXXcDeDnx-300-80.png

generator-bee

generator-bee是kissy简单工程构建器,跟generator-xcake和generator-clam有所不同,强调简单和快速,没有复杂的目录分级和复杂的命令功能,不是以页面作为划分维度,适用于小工程构建。

generator-bee 遵循最新的kissy规范,会生成demo页面和测试用例范例。

教程

demo工程传送门

  • 作者:明河(剑平)

安装

安装yeoman

npm install yo gulp -g

安装kissy-gallery目录生成器

npm install generator-bee -g

生成组件目录

新建个工程目录,进入执行命令:

yo bee

调试

模块文件使用CMD规范,是无法使用源码直接调试的,所以bee 内置了个本地静态服务,运行:

gulp

会编译文件到build目录,同时会起一个本地server,访问:http://localhost:5555/bee-demo/index.js,就是访问bee-demo/src/index.js文件。

包配置路径指向本地服务:

//url带有ks-debug
if(KISSY.config('debug')){
    base = 'http://localhost:5555/bee-demo/';
}
KISSY.config({
    packages: [
        {
            name: 'bee-demo',
            base: base,
            ignorePackageNameInUri: true,
            debug: true,
            combine:false
        }
    ]}
);

写法请参考demo/dev_index.html。

构建

打包文件

gulp

监听文件改变实时编译

gulp watch

默认编译less和生成kissy模块名和依赖表。

生成的目录结构

bee-demo           // 工程名,也是库名
|      |-----src    // 源码目录
|      |     |---------index.js     // index页面入口脚本
|      |     |---------mods     // 依赖的业务模块
|      |     |---------index.less     // index页面样式
|      |-----build    // 发布目录
|      |     |---------deps.js     // 模块依赖表
|      |-----demo    // demo目录
|      |-----test    // 测试用例目录
|      |-----build    // 发布目录
|      |-----README.md      // 库介绍
|      |-----gulpfile.js   // gulp打包时使用的配置信息
|      |-----package.js     // 依赖包配置

代码规范

模块文件使用CMD规范。

//初始化header模块
var header = require('./mods/header');
header.init();

//初始化article模块
var article = require('./mods/article');
article.init();

使用**require()**来引用模块。

工程内使用kg组件

编辑bower.json:

"dependencies": {
    "reactive": "kg/reactive#0.2.0"
}

格式为 kg/组件名#版本号 。

然后运行bower install ,会自动拉取组件到src/kg目录。

业务模块引用组件:

var Reactive = require('./kg/reactive/index');

CHANGELOG

v5.0.5

  • 去掉5.0的支持
  • 优化调试方式
  • 修正本地服务器css加载错误

v5.0.2

  • 优化代码
  • 去掉gulpfile.js中得无用代码
  • 增加对xtpl文件的编译
  • 1.4.7更新为1.4.8

v5.0.1

  • 使用新的gulp插件

v5.0.0

  • 适配kissy5.0.0

v1.0.3

  • 优化brower配置

v1.0.2

  • 增加kg brower配置

v1.0.1

  • kissy1.4.7
  • 使用gulp打包
  • 使用kclean优化代码
  • 去掉kissy mini支持

v0.0.2

  • 新增kissy mini工程支持

About

kissy简单工程构建器,强调简单和快速,没有复杂的工程分级和复杂的命令功能。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.6%
  • CSS 10.4%