一、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 轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架。

二、安装

这里以 OSX 上的安装为例,先来看下 Yeoman 的安装环境要求:

  • NodeJS >= 0.8.x
  • Ruby >= 1.8.7
  • Compass >= 0.12.1
  • optipng
  • jpegtran
  • PhantomJS >= 1.6

在 OSX 上 Ruby 是内置的,所以只需要手动配置下其它服务:

  • NodeJS 安装请直接去官网下载 .pkg 安装包进行安装(Homebrew 安装的 NodeJS 会有问题,无法运行 Yeoman 命令)
  • Compass 可以使用 Ruby 自带的包管理工具安装:
      $gem install compass
  • 其余的 optipng、jpegtran、PhantomJS 可以通过 Homebrew 安装,如果已经安装了 Xcode 那么 Xcode CLI Tools 就已经内置。

开始安装 Yeoman:

npm install -g yo grunt-cli bower

遇到权限问题请加sudo

安装完毕后,会看到以下提示:

三、使用

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 的部署就完成了。接下来就是自定义一套工程模板。

参考文章

http://yeoman.io/index.html

http://www.36ria.com/6144

前端工程构建工具——Yeoman的更多相关文章

  1. 前端工程构建工具FIS3

    FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 一.安装 全局安装fis3 ...

  2. 前端工程构建工具之Yeoman

    一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...

  3. fis3前端工程构建配置入门教程

    一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于 ...

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

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  5. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  6. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  7. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  8. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

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

    如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...

随机推荐

  1. Oracle AWR之-enq: TX - allocate ITL entry

    今天收到压力测试期间awr报告,测试人员要我看看数据库是否有可以优化的地方,数据库服务器配置信息:CPU:32*8,内存:480g 单实例数据库:oracle 11.2.0.4.具体分析过程如下: 可 ...

  2. fastBoot使用

    fastBoot使用 作者:李老师,华清远见嵌入式学院讲师. 1.1. 使用Fastboot方式烧写 在安卓手机中Fastboot是一种比Recovery更底层的刷机模式.Fastboot是一种线刷, ...

  3. (ubuntu ufw)My firewall is blocking network connections from the docker container to outside

    Maybe this is due to the current version, but the current answer doesn't work on my system (Docker 0 ...

  4. os模块os.walk() 方法和os.path.join()的简单使用

    os.walk:   http://www.runoob.com/python/os-walk.html os.path.join:   https://blog.csdn.net/zmdzbzbhs ...

  5. Selenium之firefox浏览器的启动问题及解决

    启动firefox报错如下: rg.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 ...

  6. ruby中的win32ole使用

    ruby中的win32ole是一个标准库,使用的时候只要添加require 'win32ole'就行. 下面是一段模拟一个登陆的代码 require 'win32ole' ie = WIN32OLE. ...

  7. CCPC-Wannafly Winter Camp Day4 (Div2, onsite)

    Replay Dup4: 两轮怎么退火啊? 简单树形dp都不会了,送了那么多罚时 简单题都不想清楚就乱写了,喵喵喵? X: 欧拉怎么回路啊, 不会啊. 还是有没有手误?未思考清楚或者未检查就提交, 导 ...

  8. hdu 5185 动态规划 分析降低复杂度

    这题说的是 x[1]+x[2]+x[3]+…+x[n]=n, 这里 0 <= x[i] <= n && 1 <= i <= n x[i] <= x[i+1 ...

  9. JavaScript实现Map功能

    JavaScript中没有类似Java中的Map集合类的实现,自己做了简单实现,如下: function Map() { this.elements = new Array(); this.size= ...

  10. Fms3中client端与server端交互方式汇总

    系列文章导航 Flex,Fms3相关文章索引 Flex和Fms3打造在线聊天室(利用NetConnection对象和SharedObject对象) Fms3和Flex打造在线视频录制和回放 Fms3和 ...