Yeoman 前端自动化开发
每接到一个前端项目,都会考虑以下问题:
- 项目目录该如何规划?
- 使用什么库来完成系统开发?
- 开发环境怎么搭建?
- 编译环境怎么搭建?
- 开发完成后如何打包部署?
难道每次开发,都要如上进行一次,然后还要将相应的代码库拷贝到相应环境中,好累呀。。。
寻寻觅觅,最近找到一个不错的东东 — 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
安装成功后,会看到下面的提示
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
lovecicy - 2014 年 5 月 21 日 6:10 下午
第7步为什么要运行两个task呢?