Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 

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

About

KISSY MINI 项目代码脚手架工具

Resources

License

Releases

No releases published

Packages

No packages published