Note02--前端开发环境

1. 代码编辑工具
    a. 轻量级：Sublime
    b. IDE：webstrom
2. 断点调试工具
    a. chrome插件：Batarang
3. 版本管理工具
    a. Git
    b. git小乌龟：tortoisegit
4. 开发和调试工具
    a. NodeJS
5. 代码合并和混淆工具
    a. Grunt:
        i. 当前目录：npm install  grunt
        ii. 全局环境：npm install -g grunt
        iii. 作用：
            1) JS文件合并
            2) JS代码自动压缩
            3) 每次Control+S的时候自动执行以上动作
            4) 还可以每次control+S自动运行单元测试、集成测试
            5) http://www.gruntjs.org
        iv. Prerequisite：
            1) 进入官网--》Gruntfile范例
            2) Grunt-contrib-uglify： 对代码进行混淆；
            3) Grunt-contrib-concat： 合并文件；
            4) Grunt-contrib-watch：监控文件变化；
6. 依赖管理工具
    a. Bower：前端组件自动化管理神器
        i. 项目小的话，自己管理依赖即可；相当于后台的Maven；
        ii. 作用：
            1) 自动安装依赖组件
            2) 组件之间的依赖检测
            3) 版本兼容性自动检测
            4) http://bower.io/
        iii. E.g.: 
            1) bower install jquery; 
            2) bower install bootstrap;
            3) Bower uninstall jquery;
7. 轻量级Server
    a. http-server：模拟数据
        i. 作用：
            1) 一款简单的http-server
            2) 基于NodeJS的HTTP接口
8. 单元测试工具
    a. Karma： 只是一款用来跑测试用例的runner；
    b. jasmine：类似Java里面的JUnit，提供了一套语法，用来编写测试用例；
        i. 四个核心概念：

c. Karma + jasmine结合使用
9. 集成测试工具
a. Protractor： 专门为AngularJS定制的测试工具
i. 基于WebDriverJS；
ii. 原理：利用WebDriverJS，可以借助于NodeJS直接调用浏览器（IE、FF、Chrome）的接口；
iii. Note： Protractor是专门为AngularJS定制的测试工具，但是WebDriverJS是通用的；
10. 以上测试用具，搭配使用；
11. 一个完整的项目目录结构实例：官方Phonecat实例解析