为什么选择 Yeoman 及 Yeoman 的安装

2025-03-13 10:36:13
推荐回答(1个)
回答1:

Yeoman是Google的团队和外部贡献者团队合作开发的一个项目。通过内部三个工具(yo,grunt,bower)的协

同工作,为开发者创建一个易用的工作流。它可以让网络前端开发者快速打造一个漂亮的网络应用(web

applications) 。

Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零

散的依赖关系。

Yeoman主要有三部分组成:yo、grunt、bower。这三个工具是分别独立开发的,但是需要配合使用,来实

现我们高效的工作流模式。因为Yeoman其实是三个工具的集合: YO 、 GRUNT 、 BOWER ,所以需要先解

释下这三个工具的用途。

YO :Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具

BOWER :Web开发的包管理器,概念上类似npm,npm专注于nodeJs模块,而bower专注于CSS、

JavaScript、图像等前端相关内容的管理。需要注意的是,Bower的运行,依赖于版本控制工具git,从

github拉取以来信息。 如《Node.js介绍》所说,很多前端工具,都是由Node.js所编写的,Bower也不例

外。所以要想成功安装Yeoman,需先安装 Git。

GRUNT :前端构建工具,jquery就是使用这个工具打包的。

下面将我实际安装Yeoman的过程记录如下:

我们现在就用Yeoman来建一个演示app,名字叫 My todos, 这个app的功能有添加todo、删除todo,用拖曳

功能重组你的todo,还有离线保存 todos。

先总览一下步骤:

步骤1:建立开发环境

步骤2:安装 Yeoman generator

步骤3: 用generator 构建你的app

步骤4: Yeoman 创建的文件目录结构一览

步骤5: 在浏览器中预览你的app

步骤6:开始写我们的 AngularJS 应用

步骤7: 用 Bower 来安装包 (packages)

步骤8: 用 Karma 和Jasmine 测试

步骤9: 使 todo 与本地存储一致

步骤10: 准备发布你的app!

让我们开始吧!

步骤1:建立开发环境

在安装Yeoman之前,你需要如下:

1. NodeJS v0.10.x+

2. npm v1.3.7+

最简单的方法是去 NodeJS website.网站,window 系统下载.msi, Mac系统下载.pkg, 安装后以上就全有了。

检查一下是否装好了(运行->cmd 进入Dos窗口写命令,这里不用写像下图中的"$",图中用$是因为用的Cygwin)(另:本文中的图有的是Yeoman官网的,有的是我机器上的):

安装Yeoman 工具包

检查一下是否都安装上了:

装好后会显示各工具版本:

步骤2:安装 Yeoman generator

敲入Yeoman 交互式命令:

用上下箭头选中 install a generator

这里我们安装AngularJS generator

步骤3: 用generator 构建你的app

首先建立一个项目目录来存放你的 app