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实例解析