前端开发入门:框架篇-Yeoman入门学习

墨蓝 2022-08-19 01:43 255阅读 0赞

什么是Yeoman？

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。Yeoman的logo是一个戴帽子的男人农夫。Yeoman 作为一个流行的工具集，在整合了 Yo、Grunt 和 Bower 等工具的基础上，定义了一个更加完备和清晰的工作流程。通过把一些最佳实践引入到 Web 应用中，有助于创建高质量和可维护的应用。

Yeoman的目的不仅是要为新项目建立工作流，同时还是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系。

Yeoman是由Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman和Yeoman社区共同开发的一个项目。它旨在为开发者提供一系列健壮的工具、程序库和工作流，帮助他们快速构建出漂亮、引人注目的Web应用。它不只是一个工具，还是一个工作流。它其实包括了三个部分yo、grunt、bower，分别用于项目的启动、文件操作、包管理。Yeoman的官网：http://yeoman.io

Yo:               Yo是一个项目初始化工具，可以生成一套启动某类项目必需的项目文件。一个用于构建特定框架的生态系统的代码工具，我们称之为生成器(generator)。一些繁琐的任务，使用yo就能处理一些那样的任务。

Bower：     一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。用于依赖管理，使用它以后你再也不用手动地去一个个下载你的前端库了。

GruntJS： GruntJS是基于JavaScript的命令行构建工具，它可以帮助开发者们自动化重复性的工作。多亏了Yeoman团队和[grunt-contrib][]的帮助，在项目的创建、预览以及测试可以使用[grunt][]。

## Yeoman特性进一步总结 ##

闪电般的初始化：项目开始阶段，可以基于现有的模板框架（例如：HTML5 Bolierplate、Twitter Bootstrap）进行项目初始化的快速构建。

了不起的构建流程：不仅仅包括JS、CSS代码的压缩、合并，还可以对图片和HTML文件进行优化，同时对CoffeScript和Compass的文件进行编译。

自动编译CoffeScript和Compass：通过LiveReload进程可以对源文件发生的改动自动编译，完成后刷新浏览器。

自动Lint代码：对于JS代码会自动进行JSLint测试，确保代码符合最佳编程实践。

内置的预览服务器：不再需要自己配置服务器了，使用内置的就可以快速预览。

惊人的图片优化：通过使用OptiPNG和JPEGTran来优化图片，减少下载损耗。

杀手级包管理：通过bower search jQuery，可以快速安装和更新相关的文件，不再需要打开浏览器自己搜索了。

PhantomJS单元测试：可以非常方便的使用PhantomJS进行单元测试，一切在项目初始的时候都准备好了。

*  快速创建骨架应用程序——使用可自定义的模板（例如：HTML5、Boilerplate、Twitter Bootstrap等）、AMD（通过RequireJS）以及其他工具轻松地创建新项目的骨架。
 *  自动编译CoffeeScript和Compass——在做出变更的时候，Yeoman的LiveReload监视进程会自动编译源文件，并刷新浏览器，而不需要你手动执行。
 *  自动完善你的脚本——所有脚本都会自动针对jshint（软件开发中的静态代码分析工具，用于检查JavaScript源代码是否符合编码规范）运行，从而确保它们遵循语言的最佳实践。
 *  内建的预览服务器——你不需要启动自己的HTTP服务器。内建的服务器用一条命令就可以启动
 *  非常棒的图像优化——Yeoman使用OptPNG和JPEGTran对所有图像做了优化，从而你的用户可以花费更少时间下载资源，有更多时间来使用你的应用程序。
 *  生成AppCache清单——Yeoman会为你生成应用程序缓存的清单，你只需要构建项目就好
 *  杀手级”的构建过程——你所做的工作不仅被精简到最少，让你更加专注，而且Yeoman还会优化所有图像文件和HTML文件、编译你的 CoffeeScript和Compass文件、生成应用程序的缓存清单，如果你使用AMD，那么它还会通过r.js来传递这些模块。这会为你节省大量工作
 *  集成的包管理——Yeoman让你可以通过命令行（例如，yeoman搜索查询）轻松地查找新的包，安装并保持更新，而不需要你打开浏览器
 *  对ES6模块语法的支持——你可以使用最新的ECMAScript 6模块语法来编写模块。这还是一种实验性的特性，它会被转换成eS5，从而你可以在所有流行的浏览器中使用编写的代码
 *  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

Yeoman 的重要之处在于把各种不同的工具整合起来，形成一套完整的前端开发的工作流程。使用 Yeoman 之后的开发流程可以分成如下几个基本的步骤。

在 开发的最初阶段需要确定前端的技术选型。这包括选择要使用的前端框架。在绝大部分的 Web 应用开发中，都需要第三方库的支持。有的应用可能只使用 jQuery，有的应用会增加 Twitter Bootstrap 库，而有的应用则会使用 AngularJS。在确定了技术选型之后，就可以在 Yeoman 中查找相应的生成器插件。一般来说，基于常见库的生成器都可以在社区中找到。比如使用 AngularJS、Backbone、Ember 和 Knockout 等框架的生成器。

所有的生成器都使用 npm 来进行安装。生成器的名称都使用“generator-”作为前缀，如“generator-angular”、“generator- backbone”和“generator-ember”等。安装完成之后，通过 yo 命令就可以生成应用的骨架代码，如“yo angular”用来生成基于 AngularJS 的应用骨架。

生成的应用骨架中包含了一个可以运行的基本应用。只需要通过“grunt server”命令来启动服务器就可以查看。应用的骨架搭建完成之后，把生成的代码保存到源代码仓库中。团队可以在这个基础上进行开发。开发中的一些常用 任务可以通过 Yeoman 来简化。当需要引入第三方库时，通过 Bower 来搜索并添加。

[grunt-contrib]: https://github.com/gruntjs/grunt-contrib
[grunt]: http://gruntjs.com/