• 假定现实情况：假设有个网页需求，有一个主页index.html，有三个子页contact.html、introduct.html、product.html，这三个子页分别从index.html连接过来，又可以从三个子页返回index.html。我们采用spa的方式构建单页面app，采用grunt管理前台代码程序，采用bower管理各种第三方依赖库。最终项目在

• 注意：本文档已经默认你有js、css、html基础，并且知道了解angularjs框架！

• 最后还想告诉大家一种“大繁至简”的意思，其实很多很高深的道理，回归到简单层面上来其实就是简单的叠加，最后变成了复杂！

• 我们每做一个事情，都会在心里有个默认次序，先做什么，再做什么，最后做什么，依次类推！我们搭建这个项目也是一样，我们需要先确定每一步该做什么，以此来理清思绪！

第一步：确定项目结构

• 如何熟悉angular搭建项目的目录结构的话，我们就采用下面的目录结构来组织我们的app

采用这样的结构方便我们把每一个路由当作一个模块，从而方便管理每个页面下的css、js等！

第二步：先用几个静态页面写出来

• 这一步你不要使用js等，只需要用html、css勾勒出静态页面！下面是效果截图，html、css代码请查略源项目

预览图截图如下：

第三步 安装相关管理工具

• node安装之后，用npm（node自带）在全局安装grunt-cli和bower，命令如下：

安装完成之后，我们需要在项目根部初始化一个package.json文件，这个文件的作用就是告诉其它使用你这个项目的人你这个的项目是什么情况，比如作者、版本、依赖什么的，采用如下命令，然后bash询问式一步一步要求填写你自己的内容：

当然了，你也可以采用默认初始化操作来实现封装一个package.json文件，所有内容都是系统默认填写的，命令如下：

    npm init -yes

我们再来在本地安装grunt并把它添加到包依赖devDependencies中，命令如下：

至此，我的package将会是如下内容：

    {
      "name": "demoapp",
      "version": "1.0.0",
      "description": "this is a demo for how to get up a SPA site",
      "main": "index.js",
      "scripts": {
      },
      "keywords": [
        "''\u001b[Dtest"
      "author": "lijianfeng",
      "license": "ISC",
      "devDependencies": {
      }
    }

第四步，用bower安装第三方依赖库

• 在本文档中，我们需要的第三方库有angular.js以及angular-ui-router.js，同样，我们需要初始话一个bower.json文件，这个文件的作用就是告诉bower它自己管理了那些第三方库，命令如下：

    bower init

通过填写相关信息，bower.json如下：

同时，我们还可以通过配置一个.bowerrc文件来告诉bower安装的库放在哪里，.bowerrc内容如下：

    {
        "directory":"./bower_js"
    }

ok，到这里我就可以开始用bower安装库了，并且会安装到指定目录下，相关的bower API可以查看官方文档，那我们首先安装angular-ui-router，通过安装angular-ui-router，bower会自动安装angular.js，因为angular.js是angular-ui-router.js的依赖。命令如下：

    bower install angular-ui-router#0.2.15 --save-dev

ok，我们看到我们的项目结构中多了一层目录如：

当然了，在我们用git做版本控制的过程中，为了减少给远程版本仓库存贮不必要的文件，我们可以配置一个.gitignore文件来配置什么文件需要提交到远程仓库，什么文件不需要提交的远程仓库。，比如这里我不希望node_modules和bower_js下的文件提交到远程仓库，那么就可以这样配置.gitignore，当然了实际开发过程中，你根据实际需要自行配置：

第五步，万事俱备，只欠东风，配置Gruntfile.js来管理前台代码吧

• 首先说明一下grunt是干嘛的，说白了就是个基于任务的命令配置文件，你写好配置文件，然后运行命令，它会在后台自动跑你要做的那些操作，比如有两个js文件a.js和b.js，希望压缩成一个文件，就可以利用grunt来实现，好了，我们来实现第一个任务吧：我们每次写完一个js文件或者css文件，然后在需要的页面手动引入它们，这个过程是不是很烦呢！其实通过grunt可是实现使用命令自动引入它们，那我们该怎么做呢？我们来看一下grunt官方文档：