# 基于 Yeoman 的 FIS3 主题模板制作框架初始化脚手架

## yeoman 简介

Yeoman 帮助我们创建项目，提供更好的工具来使我们的项目更多样化。详细参见: [Yeoman](http://yeoman.io/)

## 开发环境的安装
### 安装 Nodejs 
    * [32-bit下载](https://nodejs.org/dist/v6.9.4/node-v6.9.4-x86.msi)
    * [64-bit下载](https://nodejs.org/dist/v6.9.4/node-v6.9.4-x64.msi)


### 将 npm 源修改为淘宝的 npm 镜像

```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

### 安装支撑软件

```
cnpm install -g fis3 less yo http-server
cnpm install -g fis-parser-less-2.x fis3-deploy-replace fis3-deploy-zl-zip fis3-hook-relative 
cnpm install -g generator-zl-fis3-less

```

### 使用生成器

```
// 新建目录 zt1
zt1> yo zl-fis3-less
zt1> cnpm install
zt1> npm run dev  // 发布并实时监测更新
zt1> npm run server // 启动 web 服务器 默认使用 3000 端口
// 在浏览器浏览:  http://127.0.0.1:3000
```

## 生成器的使用

```bash
// 全局安装 Yeoman 框架
cnpm install -g yo
 
cnpm install -g generator-zl-fis3-less

创建一个用于开发的目录 zl-fis3-less-test

zl-fis3-less-test > yo zl-fis3-less
zl-fis3-less-test > 查看目录
```

## 生成器的开发

### generator-zl-fis3-less目录结构

```
app
 |-- index.js   主入口文件
 |-- templates  用于构建的模板(目录和文件)
README.md		描述文件
package.json	包描述文件
```

### package.json 说明

```
{
    "name": "generator-zl-fis3-less",
    "keywords": ["yeoman-generator"],
}
```

> name 名称必须以 generator- 开头
> keywords 中必须含有 yeoman-generator 关键词

### index.js 说明

```
'use strict';
var path = require('path');
var generators = require('yeoman-generator');
// 定制控制台日志的输入样式，可以非常的个性化 
// https://github.com/chalk/chalk
var chalk = require('chalk');
// 生成创建文件夹
// https://github.com/substack/node-mkdirp
var mkdirp = require('mkdirp');

// 使用 generators.Base.extend 扩展
module.exports = generators.Base.extend({
	// 构造器
    constructor: function() {
        generators.Base.apply(this, arguments);
    },
	// 初始化
    initializing: function() {
        this.pkg = require('../package.json');
    },
	// 处理用户输入
    prompting: {

    },
	// 创建目录和文件
    writing: {
        buildEnv: function() {
			// 将 templates 中的内容复制到 当前位置
            this.fs.copyTpl(this.templatePath('.'), this.destinationPath('.'), this);
        },
        assetsDirs: function() {
			// 创建 output 文件夹
            // mkdirp.sync('output');
        }
    },
	// 安装默认依赖
    install: function() {

    }
});
```

### 开发与调试

1. 在生成器目录使用 npm link 或 cnpm link 进行挂载到全局 node_modules
2. 使用 npm unlink 或 cnpm unlink 来去消挂载
3. 使用 yo zl-fis3-less 

```bash
generator-zl-fis3-less> cnpm link

generator-zl-fis3-less-test> yo zl-fis3-less

```

### npm 发布

1. 到[http://www.npmjs.org](http://www.npmjs.org) 上注册用户
2. 使用 npm adduser 添加注册用户
3. 使用 npm login 登录
4. 使用 npm publish . 发布当前模块

注意事项:
* package.json 中 name 名称必须在 npmjs 中是不重复的. 否则不能发布. 可以通过访问 https://npmjs.com/package/<package> 来验证模块名称是否可用.
* 如果本地使用了淘宝的 NPM, 则在发布之前需要将切换 registry. 具体命令使用: npm config set registry http://registry.npmjs.org


## 本地快速开发调试


 开发阶段，使用 cnpm link 将模块暴露在全局目录 node_modules 下
 只需使用其中的一种即可.
 1. npm link
    C:\Users\xxx\AppData\Roaming\npm\node_modules\generator-zl-fis3-less -> E:\sync\fis3\generator-zl-fis3-less
 2. cnpm link
    C:\Program Files\nodejs\node_modules\generator-zl-fis3-less -> E:\sync\fis3\generator-zl-fis3-less

 结束后, 使用 npm unlink 或 cnpm unlink 解除


## package.json

1. name 名称必须是以 generator- 开头, 如: generator-zl-fis3-less
2. keywords 中必须要有 yeoman-generator 关键词. 如:  "keywords": ["yeoman-generator"]

## GIT 操作

```bash
git init
git remote add origin git@git.oschina.net:icode2017/generator-zl-fis3-less.git
```


## NPM 发布时遇到的坑

因为本地采用了淘宝的 NPM,因此在 npm login 时是登录到 http://registry.npm.taobao.org/

在发布之前,应当将 npm 的 registry 临时改为 http://registry.npmjs.org

```
npm config set registry http://registry.npmjs.org
npm login
    Username: 输入你在npmjs.org上注册的用户名
    Password:
    Email:(this IS public):
npm publish .

```


如果没有 npmjs.org 上的用户, 请移步到 [http://www.npmjs.org](http://www.npmjs.org) 上注册

参考:
[http://www.07net01.com/2016/01/1179066.html](http://www.07net01.com/2016/01/1179066.html)