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的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系.

使用Yeoman搭建Web应用

- - 博客 - 伯乐在线
在这期的Code Lab中,你将会使用 Yeoman和 AngularJS搭建一个功能完整的应用,示例应用将会简短地介绍一些关于Yeoman、 Grunt和 Bower的特点. 如果你有一些编程经验的话,这期的CodeL Lab会很适合你. Yeoman的logo是一个戴帽子的男人. Yeoman通过集成了三种工具来提升你的工作效率:.

使用Yeoman你必须要知道的

- - CSDN博客Web前端推荐文章
不得不说,这年头写JS程序变得越来越复杂了. 虽然大家都为了让写JS变得更简单而创建框架、创建工具,但是感觉已经开始偏离了最初的目的. 今天来说说Yeoman,一帮人为了让写AngularJS程序更高端智能而创建的一个工具. 可以利用简单的命令行操作帮你初始化一个Angular App,CSS、图片、View和JS应该放哪都帮你决定好了,连复杂的Grunt都帮你配好了.

LevelDB学习与实践

- - 企业架构 - ITeye博客
    leveldb的实现类似于Bigtable中的一个tablet(Google),只不过底层的文件组织形式稍有不同.     每个Database有一系列本地文件组成,这些文件有不同的类型:.     log文件存储了一序列的最近更新操作,每个更新(update)都会append到当前log文件的尾部,当log文件的尺寸达到预设定的大小时,将会把此log文件转换成一个sorted table(.sst)文件,然后滚动创建一个新的log文件来保存此后的updates操作.

视频学习网站学习时长实时记录-性能优化实践

- - CSDN博客系统运维推荐文章
一、     应用场景描述. 系统主要为教师在线学习提供服务,其中视频学习网站支持教师在线视频学习,教师在视频学习过程中其学习过程会被记录下来. 每个专题下对应多个教学视频,每个教学视频时长不尽一致. 现在的记录规则是:教师在看视频的时候,视频所在的页面每分钟提交一次请求,记录该视频已学习时长,并将该记录更新到数据库.

淘宝商品库MySQL优化实践的学习

- - 标点符
淘宝商品库是淘宝网最核心的数据库之一,采用MySQL主备集群的架构,特点是数据量大且增长速度快,读多写少,对安全性要求高,并发请求高. 由于MySQL最初的设计不是用来存储大规模数据的,但淘宝的数据量非常惊人,所以在I/O方面,尤其是CPU I/O层面会有很大瓶颈,因此淘宝的主要目标也是解决IO方面的瓶颈问题.

java并发编程实践学习笔记

- - zzm
    原子操作:原子为不可再分操作.    Violation :可见关键字.    Synchronized:内部隐示锁 .    ReentrantLock:显示锁 .    ReentrantReadWriteLock:读写锁 . jmm(java内存模型):. 线程对所有变量的操作都是在工作内存中进行,线程之间无法相互直接访问,变量传递 均需要通过主存完成.

【Redis 1】Redis数据库的学习与实践—安装与部署

- - CSDN博客数据库推荐文章
Redis数据库的学习与实践—安装与部署. 一:Redis数据库简介:.   Redis—Remote DictionaryServer,可以直接理解为远程字典服务.   Redis数据库是一个高性能的key-value数据库,Redis 是完全开源免费的,遵守 BSD协议,先进的key - value持久化产品.

如何用深度学习做自然语言处理?这里有份最佳实践清单

- - 机器之心
对于如何使用深度学习进行自然语言处理,本文作者 Sebastian Ruder 给出了一份详细的最佳实践清单,不仅包括与大多数 NLP 任务相关的最佳实践,还有最常见任务的最佳实践,尤其是分类、序列标注、自然语言生成和神经机器翻译. 作者对最佳实践的选择很严格,只有被证明在至少两个独立的群体中有益的实践才会入选,并且每个最佳实践作者至少给出两个参引.

OpenStack实践

- - 开放博客
作者:Baihuogou DevOps Team. 我们在公司内部部署OpenStack主要是内部管理虚拟机的需要. 公司内部之前使用virt-manager来管理内部虚拟机,但是缺点有二:. 虽然提供图形界面,但是是桌面软件形式,需要安装软件. 所以现在需要一个新的管理软件来解决这些问题,满足两个特性:.