lego-cli

开发本工具的目的是为了规范乐高项目的开发流程、提供统一的项目环境及技术框架，从而提高工作效率。

什么是乐高？

不熟悉的同学，请先看看这个PPT。

安装

全局安装：npm install lego-cli -g

脚手架

执行 lego init 命令来搭建环境，会看到如下图：

填写项目名称和组件命名空间后，工具就开始自动生成工程了：

注意，组件命名空间是以.lego为后缀的（如 ux.lego），这是项目规范之一。填写时也可以省略后缀，系统会检测并自动加上。

生成完毕，工程的目录结构应该如下：

.
├── Gruntfile.js
├── mock
│   └── config.json
├── node_modules
├── package.json
├── public
│   ├── brix-style
│   ├── index.scss
│   └── ux.lego
├── server.js
└── views
    └── index.vm

其中，我们的组件就放置在 public/ux.lego 目录下。 注意，组件的目录结构必须遵循 [命名空间]/[组件名]/[版本号]。例如，我有一个叫 ceiling 的组件，当前版本为0.1.0，那么它的目录就应该是 public/ux.lego/ceiling/0.1.0/。

另外，对于一个乐高组件，它应该由以下的文件组成：

.
├── data.json          //mock数据文件，demo展示用
├── index.js           //组件js模块，继承自brix
├── index.scss         //组件css
├── package.json       //组件描述文件
└── template.vm        //组件vm

开发调试

执行 npm start 启动本地服务。

http服务

http服务通过@逸才的mosaic模块提供支持。

监听文件模块由node-dev提供支持，省去了修改配置时重启服务的麻烦。

mock数据

乐高项目的数据文件为mock/*.json，工程初始化时默认提供了一份。JSON对象的格式如下：

{
  //项目数据
  "pageAttribute": {
    "namespace": "ux.lego"
  },
  //项目数据
  "compVersion": {
  },
  //系统数据
  "url": {
    "keyword": "ipad",
    "catid": "",
    "frcatid": "",
    "propertyid": "",
    "refpid": "",
    "refpos": "",
    "gprice": "",
    "clk1": "",
    "loc": "",
    "tag": "",
    "count": 5
  },
  //系统数据
  "env": {
    "serverName": "hotsale4.p4p.cm3",
    "ip": "",
    "url": ""
  },
  //系统数据
  "cookie": {
    "cna": ""
  },
  //组件数据
  "compList": {
  }
}

这是个初始的结构，里面的字段是和开发约定写死的。其中系统数据的字段基本上和跳转串有关，在开发时可以不关注它们。我们需要关注的是 pageAttribute、compVersion、compList 这3个字段。其中 pageAttribute 指的是页面配置，目前项目里主要用到的就是命名空间（namespace），在工程初始化的时候会根据你填写的命名空间给它赋好值。compVersion是本页面引用的组件配置，例如：{"ceiling": "0.1.0", "featuredItem": "0.2.0"}。这个配置会输出到页面，brix框架会根据它来统一加载组件的资源（js、css）。

自动化

时至今日，grunt几乎家喻户晓。乐高项目除了用grunt做些打包、压缩的工作外，开发的时候也能帮上忙。利用grunt-contrib-watch这个插件，可以实时监控文件变化，一旦发现目标文件有变化，就执行相应的task。这样做的好处就是，当文件变化时，我们只需要刷新浏览器就可以看到修改后的效果了，更省事了。 工程初始化默认安装了如下插件：

.
├── grunt
├── grunt-contrib-clean
├── grunt-contrib-copy
├── grunt-contrib-cssmin
├── grunt-contrib-sass
├── grunt-contrib-uglify
├── grunt-contrib-watch
└── grunt-lego-upload

添加组件

要添加一个组件，需要执行以下操作：

cd public/xxx.lego
lego add your-component-name/0.x.x

注意，必须在命名空间目录下执行该操作。前面已经提到，组件的路径必须严格遵循[命名空间]/[组件名]/[版本号]。工具会在 path.join(process.cwd(), 'your-component-name', '0.x.x') 这个路径下创建组件。

组件上传

通过lego upload命令上传组件vm文件和组件描述文件

批量上传

通过grunt-lego-upload插件可进行批量上传，点击查看插件配置。

执行grunt lego_upload。

组件描述文件

组件描述文件是组件目录下的package.json文件，里面包含了对组件的描述（命名空间、组件名、版本等）。

示例：

{
  "author": "xuezu",
  "namespace": "aitaobao.lego",
  "name": "featuredItem",
  "version": "0.3.0",
  "cname": "主区",
  "ename": "featuredItem",
  "keywords": [
    "featuredItem",
    "mainarea",
    "主区"
  ],
  "demo": {}
}

预留的keywords和demo字段，用于以后的组件查询和demo展示，待讨论。

打包测试

在根目录下执行grunt build，你懂得。

上线发布

遵循阿里巴巴的gitlab发布规范。注意，你的gitlab仓库需要具有发布权限。