Yeoman 前端自动化开发

Author : luckyGirl

每接到一个前端项目，都会考虑以下问题：

  1. 项目目录该如何规划？
  2. 使用什么库来完成系统开发？
  3. 开发环境怎么搭建？
  4. 编译环境怎么搭建？
  5. 开发完成后如何打包部署?

难道每次开发，都要如上进行一次，然后还要将相应的代码库拷贝到相应环境中，好累呀。。。

寻寻觅觅，最近找到一个不错的东东 — Yeoman，能够轻松构建前端项目的骨架，完善工作流、提高了前端工程师的效率同时使项目更加规范化。

Yeoman 简介

Yeoman通过整合运用3大工具来构建项目骨架，并融合一些最佳实践来帮助你开发更加强大完善的web应用，让Web开发工作流更加自动化，先来看看这3大工具吧：

  • yo：Yeoman核心工具，搭建骨架，编译配置及依赖的工具
  • grunt：前端构建工具，可轻松完成代码编译、单元测试、代码校验等重复性工作
  • bower：前端开发的包管理器，专注于CSS、JavaScript、图像等相关内容的管理

Yeoman 简单使用

作为初学者，按照官网的codelab用Yeoman搭建了个web应用，首先在安装Yeoman前，还需要安装：

  • NodeJS v0.10.x+
  • npm v1.3.7+
  • Git

偶首次安装时，遇到了不小的挫折，各种报错，人家官网说1小时就搞定我安装了一天，各种报错呀，真是惭愧呀。。。但偶是一个不气馁滴娃，因为NodeJS是我之前就安装过的，第二天果断卸载，到官网下载重新安装，果不出所料，顺利安装并完成codelab，接下来让我们正式开始吧！

Step 1：安装Yeoman

npm install -g yo

安装成功后，会看到下面的提示

yeoman 安装成功

Step 2：安装generator

generator-前缀的模块表示它是一种工程模板，比如本次应用是基于AngularJS，使用generator-angular安装

npm install -g generator-angular

Step 3：构建目录环境

搭建好环境，接下来就让我们来创建app的目录结构吧，首先创建文件夹，并进入到文件夹的目录结构

mkdir mytodo1

cd mytodo1

运行Angular generator

yo angular

选用Bootstrap，并运行所有angular modules，成功后就可以看到你的文件目录啦

Step 4：运行环境

grunt server

让我们看一下运行效果吧

有木有点小兴奋呢？由于AngularJS鄙人不太熟，其相关操作就不赘述了。

今天还发现Grunt的有趣功能，运用live loading，当你保存相应文件，页面自动刷新，好方便呀！！

接下来看看Yeoman还有什么功能呢？

Step 5：运用Bower安装包

如安装 angular-ui-sortable

bower install -save angular-ui-sortable

运行成功后在app/bower_components找到angular-ui-sortable文件夹，只要在相应的JS中引入此module即可

Step 6：回归测试

在本次示例中使用了Karna测试框架，此时在Gruntfile.js中已经配置好相应的task，只要运行

grunt test

其中karma.conf.js,以及test/spec/controller/main.js修改相关配置

Step 7：发布

Gruntfile.js 已经完成配置，如压缩文件大小、测试代码…..

grunt

运行成功后

grunt serve:dist

再访问之前的网址，看到的就是打包好的项目啦！！[此处有掌声]

Yeoman 的优良特性

找了个翻译的比较好的

  • 快速创建骨架应用程序——使用可自定义的模板（例如：HTML5、Boilerplate、Twitter Bootstrap等）、AMD（通过RequireJS）以及其他工具轻松地创建新项目的骨架。
  • 自动编译CoffeeScrip和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轻松地运行单元测试。当你创建新的应用程序的时候，它还会为你自动创建测试内容的骨架。

Yeoman 官网：http://yeoman.io/index.html

一条评论
standard

  1. lovecicy - 2014 年 5 月 21 日 6:10 下午

    第7步为什么要运行两个task呢？

    回复

Have your say