Yeoman学习-yo篇

学习Yeoman

一. 简介

Yeoman规范了web开发的工作流。其中包括yo（脚手架），grunt、gulp、webpack（编译工具），bower，npm（包管理工具），提供了开发的一站式的解决方案。

二. 使用

日常开发web项目，会普遍遇到项目结构问题，编译打包问题和依赖包等问题。很多人乐此不疲的浪费时间解决着这些相同的问题（几乎每个项目起步时都是如此）。那么Yeoman是怎样解决这些问题的。

1. yo

粗略的说，就像copy一样，把一个项目文件当作模板，复制出另一个相同的项目结构。

有人会提出质疑，自己copy就可以了，为什么还需要yo的介入--

因为yo提供了一些可配置的方案，生成所需要的结构，并不是傻瓜式复制

a. 安装

npm install -g yo

b. 运行

yo

命令yo，选择操作，分割线上方为已安装脚手架，下方为更新，安装新的脚手架。

这里演示安装官网说明的例子generator-webapp

运行yo后会出现webapp选项；如果知道本地安装过某一个脚手架，也可以直接运行，如：yo webapp 。现在新建一个文件夹，在这个文件夹内，开始新建项目结构的旅程了。

   

选择需要的插件，空格键选择，回车确认。

最后会根据所选则的配置文件，安装基础环境依赖包，在新建的文件夹内会生成以webapp为模板的项目结构。

c. yo高级

创建自己的脚手架工具，配置文件可以npm init生成初始化package.json文件，后续修改添加相应项

{
  "name": "generator-name",
  "version": "0.1.0",
  "description": "",
  "files": [
    "generators"
  ],
  "keywords": ["yeoman-generator"],
  "dependencies": {
    "yeoman-generator": "^1.0.0"
  }

}

路径结构，其中generator和app路径是必须的，可以配置多个子脚手架，如router，命名任意；在执行时yo name（name是这个脚手架的名字），则默认是app的模板；执行yo name:router（router为子脚手架名字），则生成子脚手架模板。

├───package.json
└───generators/
    ├───app/
    │   └───index.js
    └───router/
        └───index.js

可以将实例代码copy到index.js中，并且安装包依赖（npm install），在generator-name的根目录下执行npm link（安装本地脚手架命令）

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
  method1() {
    this.log('method 1 just ran');
  }

  method2() {
    this.log('method 2 just ran');
  }
};

yo中提供了任务执行事务优先级。

initializing - 您的初始化方法（检查当前项目状态，问候语，读取配置等）
prompting- 你提示用户选择的地方（输入，单选，多选等）
configuring- 保存配置并配置项目（创建.editorconfig文件和其他元数据文件，创建.yo-rc.json文件保存配置参数）
default - 如果方法名称与优先级不匹配，它将被推送到该组。
writing - 您在哪里编写生成器特定文件（路由，控制器等）
conflicts - 处理冲突（内部使用）
install - 安装（npm，bower）
end- 结束语

其中prompting步骤和writing两个步骤可以说明yo与普通的copy区别。prompting设置的参数，可以在writing的时，以条件的形式筛选文件中的内容，如可以根据选择的platform配置生成的package.json，实现根据需求，自动化生成处理方案。这里是使用ejs模板语法。

2. 编译工具

通过项目中定义好的编译工具，可能是grunt，gulp，webpack等，直接运行起dev模式开发 or prod模式部署，目前的开发更热门于热加载，提高开发效率

3. 包管理

npm，bower或其他的包管理安装工具，将node_modules中一些好的包下载，直接import到项目中使用即可，推荐几个常用包：

moment处理时间；js-cookie管理cookie；url-parse地址栏解析；util部分工具类；md5加密;localforage本地存储

参考文档：

yeoman官网：http://yeoman.io/learning/