Yeoman学习与实践笔记

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

参考资料:

1、Yeoman:适合现代Web应用的现代工作流

2、Yeoman.io

3、Nodejs.org

4、Compass

5、Yeoman Get Started with 1.0

前端, 工作流

时间: 2024-09-20 00:39:52

Yeoman学习与实践笔记的相关文章

BIWORK 分区表阅读与实践笔记

/*************************************************************** BIWORK 分区表阅读与实践笔记 Note: 示例中使用到了SQL Server 2000的 Demo Database, 可以从此链接中下载 http://www.microsoft.com/en-us/download/confirmation.aspx?id=23654 在检查删除Partition Function 以及Partition Scheme 时,

Java反序列化漏洞利用的学习与实践

本文讲的是Java反序列化漏洞利用的学习与实践, 利用DeserLab 建议你在阅读本文之前,先阅读<攻击Java反序列化过程>,这样你就会对java反序列化有一个比较清晰的认识.除此之外,这篇文章还提到了一个"DeserLab"的演示应用.为了有效利用反序列化漏洞,理解序列化的原理以及反序列化漏洞利用的工作原理(如面向属性的编程原理),研究人员就要找到一个可供模拟的实验环境,而"DeserLab"就是一个这样的环境. 要想利用一个漏洞,通常的方法首先是

#实践笔记#Ubuntu配置Apache+PHP+MySQL_Linux

在我早先的一篇文章<#实践笔记#本地配置PHPnow与WordPress>,已经讨论过PHPnow的本地安装教程.但是PHPnow套件是Windows平台下的软件,不适用我现在使用的平台.所以笔者此次尝试了在Ubuntu 11.10平台下的本地服务器配置(配置Apache+PHP+MySQL). 废话少说,步入整体.   流程笔记: 1.打开终端,输入"sudo apt-get install apache2",回车;(安装apache2.0)   2.如有密码请再输入管理

UE实践笔记:敏捷人种志研究

近期有机会展开实地调研,尝试将ethnography(人种志)方法用起来,但我远不敢称此类研究就是人种志研究了,最多能算是以下这张IDEO方法卡所谓的敏捷人种志研究--   HOW:花时间与你的用户.在他们熟悉的环境中接触,从而观察并参与他们的一些日常活动. WHY:这个方法能让你切身体会你的用户的习惯.习俗,他们所使用的语言,以及一些活动或物件对他们来说有怎样的意义. 这几次针对卖家的实地调研给我的启发不是一般大,有几个夜晚甚至兴奋得辗转难眠. 1. 大量的问题,大量的研究.设计机会与挑战 之

学习JAVA的笔记(一)

笔记 因为学校开JAVA课程的原因,让我接触到了JAVA.然后跑到网上用GOOGLE搜索了一下JAVA,得到很多消息.进去看看,弄的一头雾水,什么是API,什么是面向对象............(嘿嘿,偶什么基础都没有,是不是很卤莽啊.)马上把教材翻出来看看,到SKYCN下了个JDK.安装-配置环境-运行伟大的"HelloWorld".安装很简单,配置就让我头疼了,还是GOOGLE,找到资料,原来是这样:系统变量->新建->变量名:JAVA_HOME 变量值:c:\j2sd

《.NET软件技术学习与实践》之序言

  自序        这是一本有自已特色的书.       这是一本于讲技术之外,更讲学习方法的书       这是一本从首至尾贯彻"授人与鱼,不如授人与渔"的书       2003年暑假我在CSDN程序人生论坛发表的个人自传--<一个普通IT人的十年回顾>(已收入本书配套光盘),一石激起千层浪,被许多网站转载,我个人也收到了海内外近千封电子邮件.       我是一个在没有明师指导情况下,几乎完全靠自己在黑暗中摸索,在自学之路上艰难跋涉过来的软件开发者.我不敢自称为&

如何在实战路上与时俱进:深度学习最佳实践

自2006年Hinton提出神经网络新的训练方法起,深度学习发展迅速,促使人工智能在图像.语音.自然语言处理等多个领域有了实质性的突破,达到产业应用标准.然而,深度学习作为人工智能领域的一项前瞻技术,实践性强,入门门槛高,关于深度学习的研究与应用,现在仍有很多问题没有找到满意的答案,这些都给深度学习的广泛应用带来挑战.本文旨在提供一份清晰.简洁的深度学习实践说明,以便从事深度学习研究与工程技术人员能够快速掌握深度学习的实际经验. 第一节:深度学习概述 深度学习是模拟人脑进行分析学习的多层神经网络

混合云使用不能盲目:学习最佳实践是王道

多年来,企业一直享受着混合云带来的益处.然而,他们同时也忍受着不断增长的痛苦,混合云的新人可以从他们的前辈所犯的错误中学习. 混合云的采用率正在上升.很多组织看到了云服务的优势,但他们也想要自己拥有一定的灵活性,将一些工作负载和数据保持在本地的控制下. 虽说有些意外,但对于IT来说,混合云的"真正的"定义并不总是很清楚--特别是因为云清洗.混合云是一种IT部署模型,它使用本地(私有)云和第三方(公共)云服务的混合,在两个平台之间进行协调. MarketsandMarkets估计,到20

学习Java的笔记(2)

笔记   31.由封装对象转换为基本数据类型:obj.XXXValue():obj为封装类的对象,XXX为该封装对象所表示的 基本数据类型.32.由字符串转换为基本数据类型:obj.parseXXX(String str):obj是封装类的对象,XXX为该封装对象 所表示的基本数据类型.33.由字符串转换为封装对象:obj.valueOf(String str).34.由封装对象转换为字符串:obj.toString().35.由基本数据类型转换为字符串:obj.toString(XXX val