前端工程构建工具之Yeoman

一、Yeoman 简介

通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库、框架文件(如 jQuery、Backbone 等),配置编译环境(Less、Sass、Coffeescript等),甚至还要配置单元测试框架,过程非常繁琐,还没开始编码时间就耗了大半天。为了解决这个问题 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社区共同开发的一个项目——Yeoman。

Yeoman 是由三个工具的组成:YO、GRUNT、BOWER

YO:Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具。
GRUNT:前端构建工具,jQuery就是使用这个工具打包的。
BOWER:Web 开发的包管理器,概念上类似 npm,npm 专注于 NodeJs 模块,而 bower 专注于 CSS、JavaScript、图像等前端相关内容的管理。

Yeoman 特性:

  • 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通过RequireJS)以及其他工具轻松地创建新项目的骨架。
  • 自动编译 CoffeeScrip 和 Compass——在做出变更的时候,Yeoman 的 LiveReload 监视进程会自动编译源文件,并刷新浏览器,而不需要你手动执行。
  • 自动完善你的脚本——所有脚本都会自动针对 JSHint 运行,从而确保它们遵循语言的最佳实践。
  • 内建的预览服务器——你不需要启动自己的 HTTP 服务器。内建的服务器用一条命令就可以启动。
  • 非常棒的图像优化——使用 OptPNG 和 JPEGTran 对所有图像做了优化。
  • 生成 AppCache 清单——Yeoman 会为你生成应用程序缓存的清单,你只需要构建项目就好。
  • “杀手级”的构建过程——你所做的工作不仅被精简到最少,让你更加专注,为你节省大量工作。
  • 集成的包管理——Yeoman 让你可以通过命令行轻松地查找新的包,安装并保持更新,而不需要你打开浏览器。
  • 对ES6模块语法的支持——你可以使用最新的 ECMAScript 6 模块语法来编写模块。这还是一种实验性的特性,它会被转换成 eS5,从而你可以在所有流行的浏览器中使用编写的代码。
  • PhantomJS单元测试——你可以通过 PhantomJS 轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架。

二、安装

具体步骤:

  1. 在F盘中新建个文件夹,然后运行dos命令,执行npm install -g yo
  2. 执行npm -install -g generator -webapp

三、使用

1、创建工程

安装好 Yeoman 后,就可以通过命令来新建工程,首先新建一个工程目录,比如 demo,首先创建 demo 目录然后在该下键入命令:

yo webapp

这时 Yeoman 会询问一些配置设置(这里全部选择了 Yes),之后就开始自动创建工程。

工程创建完毕后就可以看到 demo 目录下已经生成了许多目录及文件,这时开发所需的环境就搭建好了,可以开始编码了。

webapp 其实是 Yeoman 内置的工程模板,它整合了 html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS 等框架或库文件,使我们创建完后就能直接使用。除了generator-webapp 还有一个 generator-mocha、generator-backbone、generator-angular等工程模板,可以通过npm search yeoman-generator命令查找,然后使用npm install [name]来安装。

如果工程中需要其它类库,也可以使用命令方便的添加,例如添加 underscore:

bower install underscore

2、启动工程服务

Yeoman 内置 Node 服务。启动命令:grunt server

服务启动后会自动打开浏览器访问http://localhost:9000/(端口号可以在 gruntfile.js 中配置),然后工程服务会监听工程目录下的预编译文件,一旦发生改变就自动编译并刷新浏览器。比如我们修改工程下的 main.scss 文件,工程服务就会开始运作:

3、运行测试框架

Yeoman 内置 mocha 测试框架,在 PhantomJS 环境下进行测试,测试命令:grunt test

运行完毕后可以在工程里的 test 目录找到测试报告。

至此 Yeoman 的部署就完成了。接下来就是自定义一套工程模板。

时间: 08-20

前端工程构建工具之Yeoman的相关文章

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

前端工程构建总结

什么是前端工程构建,我们先回想一下. 开发中,我们很多时候只需要关心业务代码,而不用过多关心业务以外的,打包.兼容.优化.部署等等工作. 简单说,工程构建就是打通开发链路,让开发可以专注于项目本身. 解决了什么 在拥有较完善的工程构建以前,前端经常面临这些问题: 大量js文件通过script标签引入,造成管理困难,页面加载缓慢. css编写效率低,兼容性问题多,全靠手动自己解决. 经常耗费大量时间手动传资源到CDN,改静态资源路径. 甚至手动拷贝代码到后端工程. 等等很多效率低下.易犯错,与业务

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

前端自动化构建工具Webpack开发模式入门指南

Webpack Webpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析.压缩.合并.打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库 Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块 p

前端自动化构建工具

全局安装是把包安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录 本地(局部)安装是把包安装在指定项目(要在指定的根目录下输入命令)的node_modules文件夹下(若没有,会自动创建一个node_modules文件夹) 具体区别,推荐博文:  全局安装和本地(局部)安装的区别 本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动.复制.打包等,保证不

前端自动化构建工具-yoman浅谈

如今随着前端技术的飞速发展,前端项目也变得越来越复杂.快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求.当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间.既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀.嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman.来吧,一起看一下如何使用这个工具让你的项目秒建吧. 初识yeoman yeoman是什么 yeoman是Google领头开发的一个前端构

记一次前端工程构建

需求背景 我所在的项目组主要负责公司的A产品A1模块的界面开发.经过上半年紧锣密鼓.加班加点地开发之后,终于在7月份在国内的L局点成功上线.当时那个激动啊,苦逼的生活终于过去了,大家都跟我high起来!可是到了下半年,由于公司市场人员的给力表现,又在海外开拓了D局点和T局点,真是喜(yu)大(ku)普(wu)奔(lei)啊! 由于L局点的需求还没有明确,所以L局点的事情先按住不表,先说说D局点的需求.其实,客户的实际要求也不多,对于界面来说,无非是整体风格要与客户现有的产品保持一致.所以最终预计

gulp前端自动化构建工具入门篇

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率. 为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合

前端工程管理工具概览

1.node.js,npm包管理工具,用node xxx.js运行. npm -l,查看已经安装的 npm install [-g] [plugin-name],-g表示作为全局模块 npm search ** ,查找某模块 npm help ,查看帮助 2.grunt,构建工具,通过Package.json和Gruntfile两个文件管理构建定义.Package.json管理依赖Grunt插件,Gruntfile管理构建子任务,包括文件合并.整合打包.压缩.测试等. grunt serve,开