在之前的章节中我们讲解了前端的一些基本知识和工具的使用,包括Javascript,Angularjs,Grunt和Bower。但是在实际开发中,如何利用这些工具来进行开发呢?这节我们就主要来讲解如何利用这些工具来进行前端开发。

本篇文章参考:LET'S SCAFFOLD A WEB APP WITH YEOMAN

1.用Yeoman来建立简单的APP项目

在这篇文章中,我们将会建立如下的一个简单的APP。在这个APP中,你可以通过拖拽的方式来添加待办事件,删除待办事件,管理待办事件。

image

首先,在这里,我们需要明白一个Yeoman是干什么的。

Yeoman是Google提供的一个脚手架项目,其目的旨在于利用简单的命令来管理前端开发的流程。你可以用Yeoman方便的来预览web项目,查看项目文件,编译sass文件等等。它同时也能够进行单元测试,压缩JS和图片等等。

既然Yeoman被称为脚手架,那么它一般不会单独使用,而是和Grunt,Bower,Karma等前端工具结合使用。我们分别来一一介绍一下:

yo:脚手架工具,用于提供各类的框架和生成器,以便于你能够更快的来搭建和开发你的web项目。

grunt:前端自动化工具,经常被用于构建,发布和测试项目。

gulp:和Grunt类似的工具,但是更为简单的一种前端自动化工具。

bower:用于进行类库依赖管理的工具,使用它,将会使您的类库管理完全自动化。

介绍完这几个工具,那么我们就来安装一个Yeoman generator。

2.安装前的准备工作

在安装Yeoman前,你需要确保以下工具已经被安装到你的电脑中。

    Node.js v0.10.x版本及以上

    npm v2.1.0版本及以上

    git

当这些工具都安装完毕以后,你可以使用如下的命令来测试是否安装成功:

image

如果你能看到如上的信息,那么说明你的安装就是成功的。

如果你现在的npm版本很老了,想升级到最新版本,你可以使用如下的命令来进行升级:

image

3.安装Yeoman工具

我们用如下的命令,就可以快速的将所需要的工具都安装完毕,这里我们所需要的工具有:yo grunt bower,所以这里我们来进行安装。安装开始的时候,有一个横线一直在转圈,等三五分钟以后,就可以自动安装完毕了。我们看看安装截图:

image

从图中我们看到,所有的组件都被安装到了 C:\Users\chaoyang.shi\AppData\Roaming 文件夹下,我们需要找到这个文件夹,然后右击文件夹的安全选项,添加一个EveryOne用户来确保给予了充足的权限,这个是必须要做的,至少在我的机器上,因为这个没有赋予所有权限,导致部分命令出错。

安装完毕之后我们就可以使用如下的命令来检验安装之后的版本了:

image

4.安装AngularJS generator

你可以直接npm命令来进行安装:

image

如上图所示,安装完毕就是这个样子的。

前期准备工作都做好以后,下面我们将开始真正的项目创建了。

5,创建项目

首先在你的电脑上找个地方创建一个webdemo的文件夹,我这里为了演示,我放到了E盘的根目录下。

然后运行yo命令,来创建一个示例项目。

image

这里首先提示我们是不是需要安装Angular,这里我直接回车,表明确认安装操作。确认之后弹出来询问,问我需不需要用到Sass,这里我们用不到,所以这里我输入n并回车:

image

然后后面会继续问我是否使用bootstrap,这里我们输入Y。等全部完毕后,我们就会看到屏幕在一直滚动输出安装信息了:

image

等到屏幕滚动到如下的位置的时候,就不会滚动了:

image

这时候我们只要点击一下回车键确认,然后会询问我们是否需要覆盖package.json文件,我们这里输入n就可以了。

总共需要大概五分钟左右的样子,我们的项目就彻底的建立好了。然后我们用sublimeText打开,就可以清楚的见到项目结构了:

image

然后我们打开Http服务器来浏览一番

(由于在index.html中缺少对BootStrap的引用,所以我这里需要手动加一下:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

):

image

当服务器启动以后,我们的网站就会自动被打开,然后我们就能看到我们通过yo创建的项目示例了:

image

是不是很带感呢?

接下来,我们将会以这个示例项目为主,一步一步的来打造我们的项目。

6. 创建一个新的待办事项模板

首先打开views文件夹下面的main.html模板,删除其他多余内容,保留如下的div标签即可。

image

然后打开scripts/controllers/main.js文件,修改其中内容如下:

image

修改完毕以后,在前台进行绑定:

image

至于上面的ng-repeat,ng-model等语法,可以参见我之前写过的关于AngularJS的相关文章。

由于这里只是展示了todo集合,我们可以为其添加一个新增todo项目的功能:

image

由于是添加操作,所以我们在controller里面添加一个addTodo方法来出发添加任务的操作:

image

7.添加新的类库包

由于这里我们想让当前的todo列表支持拖拽和排序操作,所以这里我们需要引入angular-ui-sortable包和jquery-ui包,我们通过bower来添加,分别执行如下命令即可:

image

image

当然如果你嫌麻烦,你也可以用前面介绍的方法,用双&符号一次性安装。

安装完毕后,在bower_components文件夹中就多出来angular-ui-sortable文件夹和jquery-ui文件夹。

然后我们重新运行grunt serve命令,在浏览器页面我们可以看到新的angular-ui-sortable库和jquery-ui库的js文件已经被前台页面自动引用了:

image

为了使用Sortable模块,我们还需要在scripts/app.js文件夹中对这个模块进行注入:

image

如上图所示,画红线的部分就是我们注入的模块。

然后再前台,我们需要更改部分html代码以便于实现我们的功能,更改后的html代码如下:

image

到此为止,我们就拥有了一个可以进行拖拽的列表显示页面了,运行起来的时候效果其实挺酷的。

8. 单元测试

我们先中断网页浏览(ctrl+c),然后再命令行输入grunt test命令,表明启动单元测试。但是在当前的单元测试中,会有很多的warning,我们稍后来fix掉他们,下面我们一步一步的进行操作。

首先,打开karma.conf.js文件,我们会发现,当我们安装完毕jquery-ui库和angular-ui-sortable库之后,bower会自动往这个文件中添加依赖:

image

确认了依赖存在以后,我们打开test/spec/controllers/main.js文件,然后对其进行改造:

image

然后打开scripts/controllers/main.js文件,移除掉我们早前添加的3个todo项:

image

然后再运行grunt test命令,可以看到如下内容:

image

接下来我们将会添加更多有意义的单元测试,来覆盖我们的代码逻辑:

image

最后重新利用grunt test跑一遍,可以看到4个单元测试均通过:

image

9.生成production项目

当我们的开发测试都做好以后,我们需要放到线上去,我们可以首先使用grunt命令来编译和优化我们的项目:

image

在确定没有任何错误以后,我们使用grunt serve:dist命令来生成我们的项目,同时会启动本地服务器进行项目预览。

image

并且在根目录下面会生成一个dist文件夹,其内部的内容就是已经变异优化好的项目文件,其结构是这样的:

image

我们可以看到,所有的css和js都已经被合并,而且被压缩过了。

我们在这里只需要将其放到服务器上即可。

 

这个系列终于讲完了。最后这个系列可以说是对开头链接的那篇文章进行的完整翻译,但是加入了我自己的一些内容。这个系列我都是一步一步的亲手敲代码,敲配置等弄出来的,希望以后再遇到前端开发的任务时,能够轻松应对,同时也算是给自己的技能涨涨价吧。

posted on 2015-10-22 19:50  程序诗人  阅读(1030)  评论(0编辑  收藏  举报