yeoman 安装和使用 - 快速构建web应用(上)

Yeoman是由Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman和Yeoman社区共同开发的一个项目。它旨在为开发者提供一系列健壮的工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。

它不只是一个工具,还是一个工作流。它其实包括了三个部分yo、grunt、bower,分别用于项目的启动、文件操作、包管理。


Yo:               Yo是一个项目初始化工具,可以生成一套启动某类项目必需的项目文件。

Bower:     一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

GruntJS: GruntJS是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。


如何安装:

在你电脑的终端输入:

curl -L get.yeoman.io | bash

这是终端就会打印出提示,告诉你如何安装 yeoman

看到的这个大胡子人下面有一句提示让你根据紫色命令安装 yeoman

npm install -g yo grunt-cli bower

进过几屏的安装信息滚动,最后你会看到安装成功提示(只列出一部分):

yo@1.1.2 /usr/local/lib/node_modules/yo
├── open@0.0.4
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── async@0.2.10
├── shelljs@0.2.6
├── lodash@2.4.1
├── nopt@2.1.2 (abbrev@1.0.4)
├── findup@0.1.5 (commander@2.1.0, colors@0.6.2)
├── sudo-block@0.3.0 (chalk@0.3.0)
├── update-notifier@0.1.8 (semver@2.1.0, request@2.27.0, configstore@0.2.3)
├── insight@0.3.1 (object-assign@0.1.2, lodash.debounce@2.4.1, request@2.27.0, inquirer@0.4.1, configstore@0.2.3)
└── yeoman-generator@0.16.0 (dargs@0.1.0, debug@0.7.4, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.6, findup-sync@0.1.3, text-table@0.2.0, mime@1.2.11, mkdirp@0.3.5, isbinaryfile@2.0.1, underscore.string@2.3.3, iconv-lite@0.2.11, glob@3.2.9, request@2.30.0, inquirer@0.4.1, file-utils@0.1.5, download@0.1.16, cheerio@0.13.1)


如何使用?

创建一个你的项目文件夹,比如我想练习 angular.js 我在code 目录下创建了 angular 文件夹,终端下进入到这个文件夹后,运行命令 yo angular

第一步会出现这个提示,问你是否需要 Sass  ,因为需要sass运行环境是 ruby(windows下会相当麻烦,可以直接输入 no 跳过)

第二步询问你是否需要安装 Bootstrap 框架? 需要就输入 Yes

第三步询问你是否要安装上面提到的 angular 相关包,可以用空格选择或者取消选择,回车开始执行.


最后进过几屏提示信息的暂时会告诉你已经安装成功.

这是你看下你项目目录下又哪些文件

里面这些内容就是这个工具帮你生成的.


yeoman 工具内置提供node.js的web服务器,同时会监听工程目录下的文件的改变,一旦文件发生改变会重新编译文件,为了让后端给前端提供数据,我们打算用 yeoman 来启动一个web服务器.


如何启动web服务器?

这时grunt 包终于要派上用场了,执行如下命令:

zhangzhi@moke:~/code/angular$ grunt server

启动上面的服务器时会自动打开客户端页面.地址如下,生成的前端页面效果是这样的

如果你的 9000 端口不幸被占,需要修改 yeoman 中的配置文件 gruntfile.js 即可


如果你想在包中引用其他模块怎么办?这是 bower 模块现身了

bower install underscore  
grunt

bower 将在线拉取 underscore 的包内容.


生成框架的具体说明及进一步实用,欢迎阅读下一篇博文 伟大的传送带



回到顶部