用Yeoman快速构建AngularJS或前端WEB项目

Published: 2014-01-06 Category: Tags:

用Yeoman快速构建AngularJS或前端WEB项目

AngularJS和Yeoman,相信关注前端的童鞋都知道angularjs是啥东东了,至于yeoman网上也有很多介绍,我这里还是 简单的说下,其实Yeoman是由三个工具组成的,他们分别是yo(脚手架),grunt(build工具),和Bower (package管理):

  • Yo 新应用的脚手架,编写你自己的grunt配置文件,并且获取你项目build过程当中可能使用到的grunt tasks。

  • Grunt 主要用来build,预览和测试你的项目,已经内置了很多由Yeoman团队和grunt-contrib提供的task。功能就是前端的ant。

  • Bower 主要用于依赖管理,开发人员不需要手动去管理和下载相应的包,以及处理他们之间的依赖关系。我的理解,就是前端的maven


这次AngualrJS教程中会包括以下内容:

1、使用Yeoman构建一个AngularJS项目的基本框架

2、使用Grunt加速项目开发和执行相关的任务

3、使用Bower来添加第三方的插件/框架


环境要求:

在开始和运行我们的项目之前,你最好已经有如下的一些知识储备和环境的准备:

1、了解控制台和命令行的一些基本知识

2、安装了NodeJS和NPM

3、基础的JS,CSS和HTML知识


安装Yeoman!

好了,让我们从安装Yeoman开始我们的项目。在命令行输入以下的命令,来安装Yeoman,包括yo,Grunt,和Bower。

npm install -g yo grunt-cli bower

命令执行完之后我们就拥有了yeoman的强大工具包。下面会依次介绍和使用这些工具来进行项目的搭建。

Yo

Yo是用来生成项目的脚手架。它会迅速帮助我们创建基本的目录结构和配置文件等,让你迅速有一个可用的项目基础。当然除了最基础的目录项目结构之外,还有一些非常强大的定制化的生成器,来为你搭建基于特定框架的项目结构。接下来我们会使用AngularJS的生成器来为我们生成AngularJS的项目结构。

在使用AngularJS的生成器之前,我们需要安装它。运行下面的脚本:

npm install -g generator-angular

然后使用它来生成AngularJS应用的基础结构。我们来到一个空的项目目录中,我用的项目名字叫 yo-angular。在目录中运行下面的命令:

yo angular

生成器会以问一些问题的方式来帮你设置项目中可能会使用的一些其他框架或者类库,如bootstrap,requirejs等。这里可以根据自己 项目的需要选择一些基本类库,后面是可以通过bower工具再添加的。再选择好之后,yo就开始帮助我们创建、下载和配置项目。需要 花点时间,特别是在网络不好的情况下,需要耐心等待。但在完成之后,你会得到一个满意的结果。最佳实践的目录结构、配置文件, 以及所有需要的依赖包。如下图是已经部署好的项目:

** 我们可以更直观地看到目录结构

.tmp:临时目录

app:开发的源代码的目录

dist:生成用于发布的项目

node_modules:nodejs的依赖包

test:测试文件的目录

.bowerrc:bower属性

.editooconfig:对开发工具的属性配置

.gitattributes:git属性的配置

.gitignore:git管理文件的配置,使用git的同学应该不陌生,都是git相关的配置文件。ignore文件用的也较多,比如对于node_modules中的文件,可以加入ignore列表,就没有必要把这么多的模块文件放到代码库,可以让开发人员使用npm自行下载

.jshintr:使用jshint相关的配置,检查js代码规范和语法上的错误。 眼睛亮的同学肯定发现,它连404页面都帮我们创建好了,那该是多么周到啊。

.travis.yml:travis-ci持续集成的配置

bower.json:bower依赖管理

Gruntfile.js:grunt开发过程管理

karma.conf.js:karma自动化测试

karma-e2e.conf.js:karma端到端自动化测试

package.json:项目依赖文件

** Bower——web应用的包管理器

Bower帮助我们迅速找到并且安装我们想要的CSS框架,javascript库,而我们要做的只是输入几个简单的命令。 首先我们看一下bower.json文件里的内容:

{
  "name": "yo-augular",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.6",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.0.3",
    "angular-bootstrap": "~0.9.0"
  },
  "devDependencies": {
    "angular-mocks": "1.2.6",
    "angular-scenario": "1.2.6"
  }
}

从Bower的文件中我们可以到清楚的看到我们应用的依赖关系。上面已有的东西其实是在yo generate的时候调用Bower帮我们下载的。接下来我们要手动调用Bower去加入我们想要的另外的库:Angular UI。Angular UI是Angular实现的一套Bootstrap组件,包含了手风琴,日期选择起,轮播等常用控件。接下来我们运行下面的命令来安装Angular UI。

bower install angular-bootstrap --save

–save的参数告诉Bower在bower.json文件中添加对这个组件的依赖。于是我们的bower文件中就多了下面的这一行:”angular-bootstrap”: “~0.6.0″

就是这简单,你可以轻松的添加任何你想要的前端框架

关于angularjs的部分文章就不阐述了

下面我们来看一下Yeoman为我们生成的这些文件的运行情况。Grunt作为一个功能丰富的打包、测试和部署工具,为我们提供了非常方便的查看预览项目的方式。 运行命令:

grunt server

它会帮我们打开一个浏览器,并在浏览器中显示我们应用的页面。

** Grunt

Grunt是一个强大的功能丰富的javascript任务执行工具。它帮助我们自动运行我们设定的任务,如便宜coffeescript,压缩css,代码检查等。在我们开发和部署应用过程中的所有任务都可以由Grunt帮我们完成。对于开发人员来说,它会实时监控我们对代码的改动,帮助我们自动更新页面的内容。如果你在配置文件中配置了压缩、打包、测试等任务,它都可以在你代码修改的同时帮你自动运行。这样你就随时随地测试和查看自己代码的改动。

Fork me on GitHub