Node-js-自动化工具---YEOMAN

接着上篇的《 利用Node.js搭建前端自动化平台 》我们开始搭建自己的前端工作流吧！
要启动一个项目，最先要做什么？当然是搭建一个目录结构，新建一个带项目名字的文件夹，再新建一个app文件夹，里面要有common，css，img … 对了，还要有test文件夹写单元测试，嗯 ~ 大概长这样子吧

ProjectName/
├── app/  "app = Application	(应用)"
│    ├── src/	 "src = source	(源代码)"
│    │    ├── common/
│    │    │    ├── app.js
│    │    │    ├── directives.js  "指令"
│    │    │    ├── filters.js
│    │    │    ├── services.js
│    │    │    └── controllers.js
│    │    ├── css/
│    │    ├── img/
│    │    ├── js/
│    │    ├── lib/  "lib框架引用"
│    │    └── module/	"路由"
│    │          ├── header/
│    │          └── footer/
│    │                ├── js/
│    │                └── view/
│    ├── dist/	 "dist = distribution	(发布版本）"
│    │    ├── css/
│    │    ├── js/
│    │    └── html/
│    └── index.html
│				 
├── test/
│    ├── unit/	 "单元测试用例"
│    ├── e2e/	"e2e = end to end	(端口测试用例）"
│    └── karma.conf.js	"karma测试的配置文件"
│
├── node_modules/	"node插件包"
│
└── package.json		"node配置文件"

等等！NO！NO！ 我们说好的自动化呢？这样子太low了！

• 虽然你可以用你的IDE实现模板项目，但对于一个新手怎么确定自己的目录结构是合理高效的呢？
• 在团队协作中，（幻想一下）身为架构师的你怎么保证团队立项是合乎规范的呢？
• 那些配置文件呢，也要一个个建立吗？

没错为了解决这么low的行为，这时候 YEOMAN 出现了！

THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS

“ 一个现代webapp的脚手架搭建工具 ”

打开它的主页，看到旁边的 The Yeoman Team 了吗？yeoman就是由这群 " Engineering manager at Google working on Chrome " 谷歌的工程师开发的，是不是跟我一样希望有朝一日自己的头像能出现在这个列表中呢！

我在网上看了几篇YEOMAN的教学博客，还是觉得混乱，没办法只能硬下头皮用我那可怜的英文能力读官方文档 QAQ
下面就贡献下我啃官档后的经验：
##安装 YEOMAN
说到安装，现在大家都驾轻就熟了吧，打开终端，输入

$ cnpm install -g yo

一般看博客都能看到这个 $ 后接命令，这个 $ 只是表达在终端运行的意思，实际不用输入；-g 则是表示全局安装，更多百度 npm教程

这时候你一定会奇怪，不是叫 YEOMAN 吗？怎么这里写 yo 。事实上 yeoman 在 npm 中注册的名字是 yo 而不是 yeoman，又会有人反驳了，说 yeoman 是谷歌创建的工作流，里面包含 YO，GRUNT，Bower！煞有其事的做了一张图：

但是我们分别打开 Grunt 跟 Bower 的官网，可以发现Grunt的Development Team是由一群大神组成的GitHub项目，而Bower则是由 Twitter 的两位工程师开创的。

Bower was created at Twitter by @fat and @maccman, originally released as part of Twitter’s open source effort in 2012. Since its release, numerous individuals have made contributions. Bower is a team effort.

在 YEOMAN 的官网中也只是推荐 Yeoman workflow 这种工作流，所以是谷歌推荐的工作流模式 Yeoman workflow 包含这几种工具，而不是 Yeoman 包含这几种工具，Yeoman 只是一个脚手架工具。

安装 yo 完成后，我们输入 yo 运行 Yeoman 会有下面的提示出现：

（第一次运行时它会问你是否加入用户改善计划，选择 Y 就好了，当然也可以 N 不理它。）

C:\Users\Max>yo
? 'Allo! What would you like to do?
  Run a generator
  ──────────────
> Install a generator
  Find some help
  Get me out of here!
  ──────────────

上下方向键可以选择你想要做的操作，其他不用说了，直接解释下这个 Install a generator 。Generator 词义为： n. 发电机，发生器；生产者，创始者； 但在这里我更愿意把它称为模具。

在 Yeoman 的官网上我们进入 Discovering generator 可以发现许多规范化的模具。记住，带两撇胡子的是通过官方验证的模具哟。

当我们在 Install a generator 处，按下回车，会提醒下面这句话：

? Search npm for generators:

这时可以选择你喜欢的模具啦！默认，直接回车是选择 webapp 这个模具。
比如我们现在试着创建 angular 的模板项目

? Search npm for generators:angular

这里最惨的是，他默认是用 npm 安装模板的，假如你的机子没有 VPN 恭喜你，慢慢等吧～
（ npm 官方站点并没有被墙，所以还是可以成功下载的，不成功就多试几次）
等太久的话，可以终止程序运行，这里教大家一个小技巧，连续按两次 Ctrl + C 是可以终止程序的，当然你关掉重新打开也行。虽然这样，它还是非常容易出现 ParseError 的报错，别急，哥再给你一个方法保证成功。还是熟悉的配方，熟悉的味道，我们只要在终端中输入：

$ cnpm install -g generator-angular

就可以实现安装angular模具了～ 嘻嘻，又能使用cnpm了，速度就是快！（ “-g” 是否全局安装看你自己）

安装成功后，重新运行 yo 是不是发现多了两个选项【Angular】、【Update your generators】这就表明模具安装成功了！列举下常用的模具：

• $ cnpm install -g generator-webapp
• $ cnpm install -g generator-backbone
• $ cnpm install -g generator-angular
• $ cnpm install -g generator-bootstrap

##创建项目
安装完了，我们实操一遍吧～
（如果你是接着上面继续往下写的话，可以尝试下 cls 这个命令清屏，将终端界面变干净点）
打开终端 cmd （window下），输入 cd 命令：

$ cd Desktop

cd 进入文件夹命令，这里我们进入桌面

$ mkdir yeoman-demo

mkdir 新建文件夹命令，这里我们新建一个叫 yeoman-demo 的文件夹，这时候你可以在桌面发现这个文件夹，或者输入 dir 命令查看桌面的文件列表，也是可以发现这个文件夹的。

cd进入 yeoman-demo 文件夹后，运行 yo 命令，选择Angular，回车它会询问项目需要包含的框架

• 【Gulp or Grunt】后面文章中会详细讲解
• 【Sass】是类似于 Less 的 “CSS预处理器”，先给自己埋个坑《CSS预处理器 - Sass》
• 【Bootstrap】大家都很熟悉了，是一个由Twitter推出的一个用于前端开发的开源工具包

我们只是做个实例，都选 y 就好了（【Sass】是需要【Ruby】的，可以选择N），空格选择angular包含的组件，回车确定。这时候它可能会报错：

You don’t seem to have a generator with the name “karma:app” installed.

表明你的计算机没有含有 karma 这个组件，karma 一个用于自动化单元测试的npm组件。

Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！
Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。
—— 来自博客《Karma和Jasmine自动化单元测试》

我们可以通过命令 $ cnpm install -g karma 与 $ cnpm install -g generator-karma 进行安装*（假如等待过久的话，终止程序，尝试下运行命令 $ npm config set registry https://registry.npm.taobao.org 将npm的下载地址转变为cnpm，下次遇到等待也可以这样解决，秒装的哟～）*，安装完成后继续执行 yo Angular 命令，等待安装完成后，就会弹出配置 package.json 选项（画重点，package.json 一个描述该项目信息的文件，每个项目中必要文件，后面Gulp会细讲），然后看看它的配置选项自行选择。

补充下代码界常识 ( Ynaxdh )

Here the complete list of answers:
Y: yes (Default)
n: no
a: yes to this question and all others (or always yes).
x: abort (exit)
d: show the differences between the old and the new file
h: help, list all options
So if you don’t remember this definitions you can always enter h and see the list. Also in the new version, when you enter one of the letters you will see the definition showing behind the question.
The one in uppercase is the default one. If that is your choice, you can just hit enter.
——— By Jesús Carrera

issue

• 假如下载安装过程中卡顿在这条命令：
  npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
  你可以终止程序，并执行命令：
  cnpm install minimatch@"3.0.2"
• 假如还是等待很久的话，可以终止程序，先安装【Gulp or Grunt】
  $ cnpm install -g gulp
$ cnpm install -g grunt
• 还可以尝试下官方入门模具【webapp】，在新项目下运行：
  $ cnpm install -g generator-webapp
$ yo webapp

完成安装

完成后你会看到大概这样的项目结构：

├─ app/
│  ├─ images/
│  │  ├─ glyphicons-halflings.png
│  │  └─ glyphicons-halflings-white.png
│  ├─ scripts/
│  │  ├─ vendor/
│  │  │  └─ bootstrap.js
│  │  ├─ app.js
│  │  ├─ hello.coffee
│  │  └─ main.js
│  ├─ styles/
│  │  └─ main.css
│  ├─ .htaccess
│  ├─ 404.html
│  ├─ favicon.ico
│  ├─ index.html
│  └─ robots.txt
│
├─ node_modules/
│  ├─ so/
│  ├─ many/
│  └─ packages/
│
├─ test/
│  ├─ spec/
│  │  └─ test.js
│  ├─ .bowerrc
│  ├─ bower.json
│  └─ index.html
│
├─ .bowerrc
├─ .editorconfig
├─ .gitattributes
├─ .gitignore
├─ .jshintrc
├─ bower.json
├─ Gruntfile.js
└─ package.json

有很多东西对不对，不要怕，后面的文章中我们会一个个的击破它~
好啦，至此我们已经学会了如何利用 yeoman 自动化创建一个项目结构了！

YEOMAN 补充

• 当我们在新环境中，可以按以下命令模式，快速建立环境：
  $ cnpm install -g yo generator-webapp glup
  generator-something 可以接你需要的模具

• 在项目中，我们也可以用以下命令快速构建：
  $ yo webapp

• 当你想查看这个模具有什么样的配置时，可以使用下面命令：
  $ yo webapp --help

• 当你想查看，这个模具在GitHub具体说明时，可以使用下面命令：
  $ cnpm home generator-webapp

• 当 Yeoman 不能正常工作时，可以使用下面命令排除问题：
  $ yo doctor
  还不能解决点击 support 查询

• 一个模具可能非常多的功能，这样就衍生出子模具 (sub-generator) 的出现，如你想使用这个子模具，例angular:controller：
  $ yo angular:controller MyNewController

Generators scaffolding complex frameworks are likely to provide additional generators to scaffold smaller parts of a project. These generators are usually referred to as sub-generators, and are accessed as generator:sub-generator.

• 是否想创建一个属于自己的 generator 模具
  点击番外篇《 Node.js 自动化工具 - YEOMAN 之 Creaing a generator 》

• 官推资源
  Resources 查看别人家的文章

• 总结下官网学习到的词汇

单词	解释
deployment	n. 调度，部署
resource	n. 资源；物力
provide	vt. 提供；规定；准备；装备
other than	除了；不同于
complex	adj. 复杂的；合成的
yeoman	n. 自耕农；自由民；仆人
scaffolding	n. 脚手架；搭脚手架的材料
generator	n. [电] 发电机；[计] 生成器
referred to as	被称为…
utilizing	利用

那下篇我们来学习《 Node.js 自动化工具 - Bower 》

---

该篇收录于文集：Node教程