generator-mask

    0.1.1 • Public • Published

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

    Install

    npm i generator-mask

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    none

    Last publish

    Collaborators

    • bachi