lego-cli

A command line tool for lego projects

npm install lego-cli
5 downloads in the last day
19 downloads in the last week
21 downloads in the last month

lego-cli

Build Status

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

什么是乐高?

不熟悉的同学,请先看看这个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": {
  }
}

这是个初始的结构,里面的字段是和开发约定写死的。其中系统数据的字段基本上和跳转串有关,在开发时可以不关注它们。我们需要关注的是 pageAttributecompVersioncompList 这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": {}
}

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

打包测试

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

上线发布

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

npm loves you