前端见微知著流程篇：前端开发流程总结

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

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

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

在这篇文章中，咱们将会创建以下的一个简单的APP。在这个APP中，你能够经过拖拽的方式来添加待办事件，删除待办事件，管理待办事件。

首先，在这里，咱们须要明白一个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

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

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

若是你如今的npm版本很老了，想升级到最新版本，你可使用以下的命令来进行升级：

3.安装Yeoman工具

咱们用以下的命令，就能够快速的将所须要的工具都安装完毕，这里咱们所须要的工具备：yo grunt bower，因此这里咱们来进行安装。安装开始的时候，有一个横线一直在转圈，等三五分钟之后，就能够自动安装完毕了。咱们看看安装截图：

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

安装完毕以后咱们就可使用以下的命令来检验安装以后的版本了：

4.安装AngularJS generator

你能够直接npm命令来进行安装：

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

前期准备工做都作好之后，下面咱们将开始真正的项目建立了。

5,建立项目

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

而后运行yo命令，来建立一个示例项目。

这里首先提示咱们是否是须要安装Angular，这里我直接回车，代表确认安装操做。确认以后弹出来询问，问我需不须要用到Sass，这里咱们用不到，因此这里我输入n并回车：

而后后面会继续问我是否使用bootstrap，这里咱们输入Y。等所有完毕后，咱们就会看到屏幕在一直滚动输出安装信息了：

等到屏幕滚动到以下的位置的时候，就不会滚动了：

这时候咱们只要点击一下回车键确认，而后会询问咱们是否须要覆盖package.json文件，咱们这里输入n就能够了。

总共须要大概五分钟左右的样子，咱们的项目就完全的创建好了。而后咱们用sublimeText打开，就能够清楚的见到项目结构了：

而后咱们打开Http服务器来浏览一番

（因为在index.html中缺乏对BootStrap的引用，因此我这里须要手动加一下：

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

）：

当服务器启动之后，咱们的网站就会自动被打开，而后咱们就能看到咱们经过yo建立的项目示例了：

是否是很带感呢？

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

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

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

而后打开scripts/controllers/main.js文件，修改其中内容以下：

修改完毕之后，在前台进行绑定：

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

因为这里只是展现了todo集合，咱们能够为其添加一个新增todo项目的功能：

因为是添加操做，因此咱们在controller里面添加一个addTodo方法来出发添加任务的操做：

7.添加新的类库包

因为这里咱们想让当前的todo列表支持拖拽和排序操做，因此这里咱们须要引入angular-ui-sortable包和jquery-ui包，咱们经过bower来添加，分别执行以下命令便可：

固然若是你嫌麻烦，你也能够用前面介绍的方法，用双&符号一次性安装。

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

而后咱们从新运行grunt serve命令，在浏览器页面咱们能够看到新的angular-ui-sortable库和jquery-ui库的js文件已经被前台页面自动引用了：

为了使用Sortable模块，咱们还须要在scripts/app.js文件夹中对这个模块进行注入：

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

而后再前台，咱们须要更改部分html代码以便于实现咱们的功能，更改后的html代码以下：

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

8. 单元测试

咱们先中断网页浏览（ctrl+c），而后再命令行输入grunt test命令，代表启动单元测试。可是在当前的单元测试中，会有不少的warning，咱们稍后来fix掉他们，下面咱们一步一步的进行操做。

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

确认了依赖存在之后，咱们打开test/spec/controllers/main.js文件，而后对其进行改造：

而后打开scripts/controllers/main.js文件，移除掉咱们早前添加的3个todo项：

而后再运行grunt test命令，能够看到以下内容：

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

最后从新利用grunt test跑一遍，能够看到4个单元测试均经过：

9.生成production项目

当咱们的开发测试都作好之后，咱们须要放到线上去，咱们能够首先使用grunt命令来编译和优化咱们的项目：

在肯定没有任何错误之后，咱们使用grunt serve：dist命令来生成咱们的项目，同时会启动本地服务器进行项目预览。

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

咱们能够看到，全部的css和js都已经被合并，并且被压缩过了。

咱们在这里只须要将其放到服务器上便可。

 

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