Yeoman学习与实践笔记

标签: NodeJs代码示例 | 发表时间:2017-05-05 10:33 | 作者:
分享到:
出处:https://my.oschina.net/u/2391658

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太少的原因,但愿如此。

相关 [yeoman 学习 笔记] 推荐:

Yeoman学习与实践笔记

- - 孟飞阳的博客
Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流. Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系.

shell 学习笔记

- tiger - 游戏人生
将脚本目录加到 PATH 中. 在 dash 中如何进行字符串替换. 将 rst 格式文档转换为 blog 可用的 html 代码. shell 脚本虽然不是非常复杂的程序, 但对于首次接触的我来讲, 多少还是有些忌惮. 不过, 接触任何新事物都需要勇敢面对, 逐步树立信心. 我是冲着把脚本写好去的, 所以, 我的目标是能够写出友好, 健壮, 优美的脚本..

OAuth学习笔记

- 宋大妈 - FeedzShare
来自: 标点符 - FeedzShare  . 发布时间:2011年08月29日,  已有 2 人推荐. OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.

Vim学习笔记

- 临池学书 - C++博客-首页原创精华区
最近在学习Vimtutor中的相关内容,Vim的使用博大精深,很多命令一旦不使用就会忘记,下面把其中的没有使用到的相关命令做一个简单的总结,供以后复习使用. 至于常见的保存,插入等等命令,则不予记录,在以后的使用中加深练习即可. To change until the end of a word, type  ce (ce + 修正的单词).

jQuery学习笔记

- - ITeye博客
什么是jQuery,它能为我们做什么. jQuery是一个javascript类库或称之为javascript框架. 无需刷新页面从服务器获取信息. 简化常见的javascript任务. 为什么会如此流行或说得到大量用户群的支持:. 多重操作集于一行(避免使用临时变量或不必要的重复代码). jQuery利用了CSS选择符的能力,在DOM中快捷而轻松地获取元素或元素集合.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

JdbcTemplate学习笔记

- - SQL - 编程语言 - ITeye博客
1、使用JdbcTemplate的execute()方法执行SQL语句. 2、如果是UPDATE或INSERT,用update()方法.    JdbcTemplate将我们使用的JDBC的流程封装起来,包括了异常的捕捉、SQL的执行、查询结果的转换等等. spring大量使用Template Method模式来封装固定流程的动作,XXXTemplate等类别都是基于这种方式的实现.

Activiti学习笔记

- - 企业架构 - ITeye博客
第一个Activiti的HelloWorld. 获取核心ProcessEngine对象 2. 根据需求,获取对应的服务实例 3. 使用服务方法,做事情 * * @author Administrator * */ public class HelloWorld {. // 加载核心API ProcessEngine.

Disruptor 学习笔记

- - 开源软件 - ITeye博客
Disruptor 是一个高性能异步处理框架,也可以认为是一个消息框架,它实现了观察者模式. Disruptor 比传统的基于锁的消息框架的优势在于:它是无锁的、CPU友好;它不会清除缓存中的数据,只会覆盖,降低了垃圾回收机制启动的频率. Disruptor 为什么快. 通过内存屏障和原子性的CAS操作替换锁.