Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。

 
Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系。
 
Yeoman主要有三部分组成:yo(脚手架工具)、grunt(构建工具)、bower(包管理器)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们高效的工作流模式。
 
下面这幅图很形象的表明了他们三者之间的协作关系。
YOMAN的特性
 
闪电般的初始化:项目开始阶段,可以基于现有的模板框架(例如:HTML5 Bolierplate、Twitter Bootstrap)进行项目初始化的快速构建。
了不起的构建流程:不仅仅包括JS、CSS代码的压缩、合并,还可以对图片和HTML文件进行优化,同时对CoffeScript和Compass的文件进行编译。
自动编译CoffeScript和Compass:通过LiveReload进程可以对源文件发生的改动自动编译,完成后刷新浏览器。
自动Lint代码:对于JS代码会自动进行JSLint测试,确保代码符合最佳编程实践。
内置的预览服务器:不再需要自己配置服务器了,使用内置的就可以快速预览。
惊人的图片优化:通过使用OptiPNG和JPEGTran来优化图片,减少下载损耗。
杀手级包管理:通过bower search jQuery,可以快速安装和更新相关的文件,不再需要打开浏览器自己搜索了。
PhantomJS单元测试:可以非常方便的使用PhantomJS进行单元测试,一切在项目初始的时候都准备好了。
 
安装前的准备工作
 
检查系统中是否安装了:Node.js、Ruby、Compass。
 
Mac下安装Node.js非常方便,首页提供了一个pkg下载,双击后可以默认安装node、npm到/usr/local/bin下,我们只需要确保/usr/local/bin包含在PATH变量中就可以。
 
Mac Mountain Lion 下自带了Ruby,所以也就不需要再单独安装了。
 
Compass安装需要依赖于Ruby Gems,执行下面的步骤:
sudo gem update --system
sudo gem install compass
 
安装
 
环境准备好之后,就可以进行安装了,执行:
sudo npm install -g yo grunt-cli bower
 
安装成功后,会看到下面的提示:
 
 
使用
 
执行 yo webapp 我们就可以快速的创建一个新的Web应用的框架,一个通常的工作流程如下:
 
 
项目实践
 
本篇以一个实际项目为例,通过Yeoman来构建一个简单的Blog页面:
 
环境准备好之后,我们开始自己的项目开发了,首先为自己的项目准备一个目录,我这里是: rivertown.sinaapp.com。
然后第一步,使用 yo 进行快速的初始化,初始化时会询问我们是否使用Bootstrap和RequireJS框架,我这里都选择了是。完成后一个Web应用的基础框架就建立好了。
 
 
 
初始化的WebApp目录结构如下,app目录是我们项目的主目录,test目录中对应的一些JS的单元测试文件。
注意我们需要安装黄色字体的提示,将npm和bower安装到项目本地。
 
修改页面文件以及样式。
 
对页面进行预览和测试。当代码编辑到一定程度,我们就需要对页面进行测试了,这个时候需要Grunt派上用场,执行下面的命令:
很快,浏览器中就可以看到我们的页面了。
 
更神奇的是,一旦我们编辑了项目源文件之后,切换到Safari窗口,就马上能够看到修改所带来的变化,根本不用手工刷新页面!
 
如果我们想对JS进行测试,那么必须利用npm将PhantomJS安装到本地,然后执行grunt test。
 
最后的步骤就是编译生成项目了,执行 grunt 就可以将项目编译生成在 dist 目录下,有可能生成的时候会提示 phantomjs 没有的错误,这个时候执行 grunt --force 强制跳过这一步就可以了。
查看具体的main.css和main.js中的内容,可以发现里面的内容都是经过优化之后的。
 
使用体验
 
经过一下午的试用,第一对于有这么一个集成化的构建、开发、编译流程,感觉非常新奇,相比于传统的开发方式。我需要首先确定用哪些框架,然后各个网站收集源代码,进行整合,还要部署一个测试的Web服务器,不管是用(Apache、Nginx还是Xampp),最后还要做代码的优化。而现在使用了Yeoman之后,所有的这些工作都被自动化、流程化了,我只需要按照既定的步骤来做,很多事情Yeoman都帮我做好了,对于前端开发来说,节省了非常多的力气。而且,生成项目的代码质量也都很不错。
 
遗憾的地方在于目前Yeoman的相关资料还比较少,中文的资料也非常少,对于如何深入的学习和定制化,还需要继续的钻研。
 
PS:吐槽一下百度,不得不说对于IT工作者来说,百度真的不是一个好的选择,输入Yeoman,除了Infoq的两篇介绍性的内容,其他的内容几乎与我需要的都相隔万里,也许是国内关注Yeoman太少的原因,但愿如此。
 
参考资料:

google yeoman的更多相关文章

  1. yeoman(转)

    前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,可以屏蔽复杂性,可以规范我们的架构和我们的代码,可以让我们的享受编程的乐趣.Yeoman可以做到. 很多年以前,rails刚刚出世, ...

  2. Yeoman自动构建js项目

    Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...

  3. 使用Yeoman,Grunt和Bower开发AngularJS(译)

    使用Yeoman产生AngularJS的主要骨架 使用Grunt加速开发和帮助执行 使用Bower来加入第三方插件和框架——third party plugins/frameworks 一.准备工作 ...

  4. 为什么选择 Yeoman 及 Yeoman 的安装

    今天向您介绍一个我刚接触到的比较新的网络前端开发工具: Yeoman . 什么是Yeoman? Yeoman是Google的团队和外部贡献者团队合作开发的一个项目.通过内部三个工具(yo,grunt, ...

  5. Yeoman:适合现代Web应用的现代工作流

    Yeoman:适合现代Web应用的现代工作流   Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML. ...

  6. 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装

    最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...

  7. Yeoman入门之安装及环境配置

    Yeoman入门之安装及环境配置 http://blog.csdn.net/panlingfan/article/details/27345037 http://www.nodejs.orgYEOMA ...

  8. yeoman生成react基本架构

    工欲善其事必先利其器.在开始react开始之前,我们先使用一系列的前段工具构建自己的前端集成解决方案. 环境配置: Bower,node js,npm,Grunt,Gulp,Yeoman 作者一直使用 ...

  9. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

随机推荐

  1. gitlab一键安装

    参考 https://about.gitlab.com/downloads/

  2. [RxJS] Filtering operator: single, race

    Single, race both get only one emit value from the stream. Single(fn): const source = Rx.Observable. ...

  3. linux 管道--转

    linux 管道 管道是Linux中很重要的一种通信方式,是把一个程序的输出直接连接到另一个程序的输入,常说的管道多是指无名管道,无名管道只能用于具有亲缘关系的进程之间,这是它与有名管道的最大区别. ...

  4. Android(java)学习笔记200:Android中View动画之 XML实现 和 代码实现

    1.Animation 动画类型 Android的animation由四种类型组成: XML中: alph 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动 ...

  5. windows10UWP:Segoe MDL2 图标指南

    windows10 UWP 开发中,图标的使用非常广泛.为此,微软建议大家使用 Segoe MDL2 Assets 字体来获取图标.Segoe MDL2 Assets 包括了哪里图标,微软在 http ...

  6. jQuery 获取文件后缀的方法

    var location=$("input[name='file']").val(); var point = location.lastIndexOf("." ...

  7. date和long的相互转换

    import java.text.SimpleDateFormat; import java.util.Date; public class T { public static void main(S ...

  8. StructureMap Exception Code: 207 Internal exception while creating Instance '06fc8bd7-76db-47c1-8d71-31090a074f5e' of PluginType QIMS.Repository.IComStaffRepository. Check the inner exception for more

    标题翻译: StructureMap异常代码:207内部异常,同时创造PluginType QIMS.Repository.IComStaffRepository的实例“06fc8bd7-76db-4 ...

  9. MyTask1

    从去年10月份开始着手的一个小项目,啊喂~人家更笨就没学过.net好不,都是现学现卖的丫~~~23333,好了好了,下面进入正题: 陆陆续续做了很长时间(其实也就是这两天兴趣说来就来,许久没码代码手痒 ...

  10. 关于 Repository和UnitOfWork 模式的关系

    本以为,关于这方面的理解,园子中的文章已经很多的了,再多做文章真的就“多做文章了”,但是最近发现,还是有必要的,首先,每个人对于同一事物的理解方式和出发点都是不同的,所以思考的方式得到结果也是不同的. ...