基于AngularJS+Gulp构建SPA

SPA？

SPA（Single Page Application）

优点

  1. 前后端职责分离，架构清晰

    前端进行交互逻辑，后端负责数据处理,各自单独开发测试

  2. 良好的交互体验

    前端进行的是局部渲染。避免不必要的跳转和重复渲染

  3. 减轻服务器压力，吞吐能力提高几倍

  4. 共用一套后端程序代码

    可以同时用于Web界面、手机、平板等多种客户端

缺点

  1. SEO难度较高

    由于所有的内容都在一个页面中动态替换显示，需要做一些静态页面给搜索引擎用

  2. 实现路由，否则不能使用浏览器的前进后退功能

  3. 初次加载耗时多

AngularJS

WEB应用中的一种客户端的解决方案

AngularJS主要考虑的是构建CRUD应用

主要核心有如下几点

  1. MVVM

  2. 模块化

  3. 自动化双向数据绑定

  4. 语义化标签

  5. 依赖注入

Gulp

gulpjs是一个前端构建工具，其API非常简单，且易于学习，它利用 Node.js 流的威力，可以快速构建项目并减少频繁的 IO 操作。

前后端分离

本地开发

Angular UI-Router

  1. UI-Router被认为是AngularUI为开发者提供的最实用的一个模块
  2. 根据'机器状态'来组织和控制界面UI的渲染
  3. 创建嵌套分层的视图
本地服务及mock数据
  1. gulp-concat(实现一个本地服务)
  2. connect-rest(让楼上支持 get/post/put/delete)
  3. opn（打开一个地址）
  4. mock

模块化系统

js

  • 公共文件打包成一个文件并压缩

  • 业务模块文件打包成一个文件

  • css

  • 提供一个入口文件导入所有的less文件

  • gulp-less

字体

  1. 通过自定义字体来实现icon的可定制性很高，我们可以随意的定义颜色、大小、透明度
  2. 能够更好的兼容浏览器
  3. 加载一个字体文件就可以加载所有icon，这样也可以减轻服务端的压力
  4. FontAwesome

生成自定义字体

监听任务，刷新页面

  • html
  • js
  • less
  • svg

  • gulp-connect提供让页面刷新的api：reload（）

代码规范

  1. ES5严格模式（Strict mode）
  2. jsHint

Git 钩子

  • 让你的代码规范执行关联到git
  • ghooks

编写nodejs模块管理gulp任务

打包部署

源码转换

js

css

image

html

其他处理

  • 哈希处理：gulp-rev
  • 哈希清单替换：gulp-rev-replace
  • 字体文件拷贝到目标目录
  • 更新文件资源的引用路径

源码转换后调试问题