yeoman入门

本文参考yeoman官方http://yeoman.io/codelab/meet-yeoman.html

首先yeoman是一个集成了gruntbowergulp的前段构建工作流工具，可以快速生成构建WebApp甚至是AngularJS的App。

第一步，首先是安装

在写这篇文章的时候，最新版本的yeoman版本是1.4.7，后续更新可能会和描述的步骤不同，包括我在学习安装的时候，和网上很多文章也有出入，所以干脆就看官方稳当了。

前提条件需要安装的环境

Node.jsv0.10.x+

npm(whichcomesbundledwithNode)v2.1.0+

git

确保以上三个环境的安装

node--version&&npm--version

npminstall--globalnpm@latest

git--version

都有了则可以继续向下安装bower（管理前端依赖库的工具）grunt-cli（构建工具）和gulp（类似grunt的构建工具，号称可以抛弃grunt）

npminstall--globalyobowergrunt-cligulp

在全局分别安装以上

确保他们的安装成功

yo--version&&bower--version&&grunt--version

这里需要注意的一点就是，可能之前有以上环境的童鞋，如果版本过旧可能导致版本不支持，所以需要根据当时的要求安装限制最低环境以上的环境。

第二步

我们要使用yo的时候，首先会用它来帮我们创建和生成代码包，全自动化的工作流，所以我们不光需要安装以上的内容，还需要安装一些yo的功能

npminstall--globalgenerator-angular

（如果使用gulp的话，则是npminstall-ggenerator-gulp-angular）

安装angular项目的生成器

npminstall-ggenerator-webapp

（如果使用gulp的话，则是npminstall-ggenerator-gulp-webapp）

安装webapp项目生成器

当然还可以使用yo命令，打开yo的使用菜单，然后选择Installagenerator

第三部

开始创建项目，首先创建文件夹

mkdiryoTest&&cdyoTest

然后创建angular项目

yoangular

（如果使用gulp的话，则是yogulp-angular）

就会在该文件夹下生成项目相关的文件，在创建开始会让用户选择，是否使用Sass、Bootstrap等，通过空格进行选择或取消，然后回车

（当然，也可以使用yowebapp（yogulp-webapp）来创建普通的web应用）

第四步

目录结构创建完后，就可以运行Simple了

gruntserve（也可以用gulp）

运行后，浏览器会自动打开页面，就可以查看页面内容和编写修改了。

服务在命令终端内启动监听，通过CTRL+C来终止服务

第五步

开发项目过程中，我们会随着项目扩大用到新的依赖

通过bowersearchangular-ui-sortable

来查找依赖库

通过bowerinstall--saveangular-ui-sortable

来进行安装

安装后在文件夹内可以看到自动下载的依赖包，并且这部分依赖包在下次使用grunt的时候，会自动加到index.html里面的引用里，方便许多，不过，如果是angular的模块依赖，还是需要自己在代码中去添加。

（另外此处需要注明一点，在bowerinstall之后，如果有没有加入到index.html的情况，有可能是安装的名称或者选择的库不对，比如我遇到的highlightjs，直接安装git://github.com/isagalaev/highlight.js.git下的，这里面并没有bower文件，所以就是不支持bower，而且版本也比较老，后来发现，highlightjsgit://github.com/components/highlightjs.git这个版才是，并且始终为最新版本）

第六步

发布项目文件

gruntserve:dist

编译压缩合并，并运行

以上就是yeoman的入门内容了