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 的包内容.
生成框架的具体说明及进一步实用,欢迎阅读下一篇博文 伟大的传送带