KISSY MINI 项目代码脚手架工具
CSS JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
page
.gitignore
LICENSE
README.md
package.json

README.md

generator-mask

by 拔赤 bachi@taobao.com

NPM version build status Coverage Status node version npm download

generator-mpi

Generator-Mask 工具简介

KISSY MINI 是一款面向无线前端研发的 JavaScript 类库,Generator-Mask 是 KISSY MINI 项目脚手架工具,用来生成项目代码骨架,你可以方便的基于此结构来开发你的项目,并享用到 KISSY MINI 的诸多优秀特性。

Generator-Mask 是 Generator-clam 简化开源版本,设计原理完全一致,Clam 绑定了更多阿里内部私有容器技术规范,阿里内部(阿里旅行)的同学请异步Generator-clam

注意:Generator-Mask 是项目生成工具,Generator-Mpi 是 KISSY MINI 模块代码生成工具

工具安装

如果你在阿里内网,请将 NPM 源指向内网镜像 sudo npm install -g tnpm --registry=http://registry.npm.alibaba-inc.com,然后用tnpm(阿里内网 NPM)来安装

首先安装三件套:

npm install -g yo grunt-cli bower

然后安装本地服务和脚手架

npm install -g here-ssi generator-mask

完成。

工具使用

首先创建好一个存放项目的空目录,进入这个空目录,执行

yo mask

然后根据提示完成项目初始化的工作即可。初始化完成后的目录结构为:

./
├── Gruntfile.js              项目构建主任务
├── package.json              项目配置文件
├── README.md                 项目自述文件
├── build/                        构建目录
├── doc/                      文档存放目录
├── grunt/                        各构建任务脚本
│   ├── bower.json              各构建任务脚本安装配置
│   ├── custom/*.js             自定义任务
│   └── default/*.js            默认任务
└── src/                      源码目录
    ├── config.js             项目config.js
    ├── mods/                 业务公用模块目录
    │   └── header.html         公用头
    ├── widgets/              组件目录
    │   ├── bower.json          组件安装源配置(gitlab or github)
    │   ├── cssreset/           Cssrest 种子
    │   │   └── reset.css
    │   └── kissymini/          Kissymini 种子
    │       └── build/mini-min.js
    └── pages/                    页面目录         
        └── home/             Home 页面目录
            ├── index.js      Home 下辖的js文件
            ├── index.scss        Home 下辖的scss文件
            └── index.html        Home 下辖的html文件

我们始终将项目代码分割为三个部分:pages(页面)、mods(业务公用逻辑)、widgets(组件),其中 widgets 中推荐存放外部依赖的模块,通过 bower install 来安装,其中src/widgets/bower.json中带有组件安装源的配置,这个配置是通过yo mask初始化时输入的。

此外,若要获得可发布代码,则将src/目录中的源码构建到build/目录中,构建脚本参照项目根目录下的Gruntfile.js,其中构建任务配置详情均存放在grunt/default/目录中。

运行 hello world

当初始化完成项目骨架后,要补全本地的node模块,在项目根目录下执行npm install

开启本地Server:在项目根目录执行

here

这时直接打开浏览器访问到本地目录,选择src/pages/home/index.html,可以看到 “hello world”,项目运行成功。

项目构建

在根目录执行

grunt

将会针对src/进行构建,构建完成后的目录结构和src/保持一样,是可发布的代码,包括 html 代码和 资源文件(css 和 js),执行here开启本地服务后,访问build/pages/home/index.html亦可以看到“hello world”。

Mask 的使用习惯

Mask 生成的代码本质上是一套框架,每个目录具有自己的语义和规范,按照这个规范会写出非常出色的项目代码,在复杂的业务研发中,也能保持项目代码结构的整洁易读。即你要接手别的KISSY MINI 的项目,只需将代码clone到本地,然后进入项目目录执行npm install即可,直接就拥有了here预览源码和grunt构建脚本。

Mask 脚手架工具的边界同样清晰,这些内容不是 Mask 脚手架负责的

  1. 代码的发布操作
  2. 埋点和数据统计
  3. 页面特殊标签的构建

当然如果你足够了解grunt构建工具,完全可以自己定制构建脚本,自行添加的构建参数配置可以放在grunt/custom/中。

因此,Mask 实际上仅对 KISSY MINI、Bower、Git、Grunt 有依赖,此外 Mask 还建议所有 css 源码编写使用 sass 或者 less。

widgets 代码的生成和安装

KISSY MINI 有推荐的模块代码格式,使用Generator-Mpi来生成,更多内容请参照 Mpi 官网