Yeoman 安装及使用

Yeoman介绍

Yeoman主要有三部分组成：yo（脚手架工具）、grunt（构建工具）、bower（包管理器）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们高效的工作流模式。

一、Yeoman 安装步骤

1、安装Node.js
Node.js官网下在地址 https://nodejs.org/en/download/
安装好后，在cmd命令行中输入 node --version，出现版本号，说明安装成功。

node.png

2、安装npm
安装node.js会自动安装npm，验证npm是否安装成功，输入npm --version，出现版本号 说明安装成功。

npm.png
3、安装git
Yeoman 在自动构建项目时会用到改软件。下载地址 https://git-scm.com/downloads

4、安装yo 、grunt、bower
在cmd命令行中输入 npm install -g yo grunt-cli bower

Yeoman.png

5、安装 generator
在命令行中输入 yo，在这里显示的是我的系统中已经安装的generator的库，有Angualr、Bootstrap、Webapp，安装好的generator的库 都会显示在这里，我们就可以直接选择它然后运行。

图片.png

这里介绍怎么安装generator，我们用上下键选择 install a generator，安装我们需要的 generator

generator.png

在这里搜索我们要查找的包，这里我们查找关键字webapp，选择webapp安装包进行安装

图片.png

二、使用Yeoman 创建web项目

先在本地创建自己存放项目的路径，也可以用命令创建 随意啦。

图片.png

在cmd命令行中，输入命令切换到该目录下

图片.png

现在我们就来创建我的项目，输入yo，在这里选择我们已经安装好的generator ，我们现在选择的是Webapp

Paste_Image.png

这里选择了Bootstrap

1.png

执行完毕查看我们的目录就会有以下文件生成，这样我们的项目就建好啦！

目录.png

最后一步可以启动我们的项目了，在安装过程中，我选择了用gulp代替grunt ，所以还需要安装gulp 输入命令 npm install -g gulp,安装成功就可以启动项目了，输入 gulp serve。如果安装过程中我们选择的是grunt，那么我们就安装grunt，npm install grunt --save-dev 启动项目就输入 grunt server

图片.png

浏览器运行结果显示

图片.png