generator-mask

generator-mask

by 拔赤 [e-mail]

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 官网