你的位置:首页 > Java教程

[Java教程]yeoman前端脚手架整合


工作到月底,整整满一年了 ,公司项目全都是传统企业网站,每天重复性的切页面,根本跟应用挂不上钩,发现这么干下去对于职业前途不太好。本小白开自学前端,修正不足。大神欢迎指导,误拍。

 

1.面对复杂的前端应用。如何能够游刃有余,这是作为新时代的有为青年的一个巨大挑战?

学习自动化工具和正规的流程这事,作为有为青年必须提上日程来了。

目光狭隘的我今天才发现yeoman框架:

一个流行的工具集,集合了grunt,bower,yo等工具,创建高质量可维护的应用。

在开发初期要对技术选型,在大多数web应用中,都需要第三方库的支持。有些应用会使用jq,boostrap,有的还会用到angular,甚至有些都要引用,在我们确定了技术选型以后,我们通过yeoman的生成器插件,生成器插件"generator-XXX库",所有的generator-生成器都采用npm包来安装库,安装完成后,通过“yo XX”库命令生成应用的脚手架。

 

下面介绍其他三个主要集合工具

yo工具:

让初始化文件目录变简单,还是那话作为新时代的有为青年,我们要摆脱早期前端的刀耕火种,让自动化的小机器人舞起来。通过ye webapp命令构建基础web应用目录。 基础应用包含了:HTML5 Boilerplate、jQuery、Modernizr 和 Twitter Bootstrap 等。在基础应用不能满足我们的基本需求时,我们在通过yeoman的"gennerator-xxx库,然后yo xxx加入骨架。

 

bower工具:

在Web应用中,我们可能会引入很多第三方的库,传统的做法是从这些网站上下载这些库,然后放到项目目录下的某个文件夹下去,之后在html中引用进去。这个做法无形中加大了有为青年们的工作量。尤其是在不同js库中,我们要保证依赖库之间的版本兼容问题。采用bower search XX库,搜索xx库,只有xx库在bower中注册过后,我们才能够使用。当下载过后的bower库保存在bower_componentes文件夹中。通过“bower update”命令来进行更新。当不需要一个库时,通过“bower uninstall”命令来删除。使用“bower list”命令可以列出来当前应用中已经安装的库的信息。

注意:摆脱刀耕火种,找到bower.json文件,类似于package.json包依赖管理文件

{ "name": "yeoman-sample", "version": "0.1.0", "dependencies": { //生产环境  "sass-bootstrap": "~3.0.0",  "requirejs": "~2.1.8",  "modernizr": "~2.6.2",  "jquery": "~1.10.2" }, "devDependencies": {} //开发环境}

http://www.t2th.cn/news/show-388.html

http://blog.bingo929.com/yeoman-grunt-bower-polymer-web-components-javascript-create-web-app.html

http://www.ibm.com/developerworks/cn/web/1402_chengfu_yeoman/