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