前端开发入门 --摘自慕克网大漠穷秋

一、需要什么样的前端开发工具

代码编辑工具、断点调试工具、版本管理工具、代码合并和混淆工具、依赖管理工具、单元测试工具、集成测试工具

1、代码测试工具

轻量级：sublime

重量级：webstome(可以实时查看在各个浏览器中的兼容性)

2、断点调试工具

chrome 的插件 batarang(针对Angularjs)

firefox的插件firebug

3、版本管理工具

git(当前比较火，之前的有svn,cds)

4、开发和测试工具>>>Node.js

npm安装与使用（blog)

git bash 下输入:：npm install grunt (在当前目录下安装grunt)

     cd node_module(创建node_module)

npm install -g grunt(全局目录下安装grunt)

5、代码合并和混淆工具---常用grunt

其中uglify主要是对代码进行混淆

concat用来合并文件

watch监控文件的变化

grunt 配置文件

(1)node_module 里包含为grunt配合使用的插件

(2)src or app 项目源代码

(3)test测试用例

(4)dist最终编译的js代码即被混淆、被压缩的js代码

(5)package.json位于根目录下面，该文件由html读取 可以上网查看相关内容

6、依赖管理工具 ---bower

(1)自动安装依赖的组建

(2)组件之间的依赖检测

(3)版本之间兼容性自动检测

eg: bower install jquery

       bower install bootstrap

      如果执行bower uninstall jquery则bower会warning因为bootstrap是依赖于jquery的

轻量级server httpserver 用来测试数据

7、单元测试 runner ---karma

同样是使用npm来安装

karma是一个跑测试的容器，没有属于自己的语法，需要使用jasmine(类似java的juint)来编写测试用例

jasmine四个核心：分组，用例，期望，匹配

即为：

describe(string,function)这个函数表示分组，即一种测试用例

it(string,function)这个函数表示测试用例

expect(expression)表示期望expression具有某个值或者某种行为

to**(arg)表示匹配

命令：karma start

专门为Angularjs定制的测试工具---Protractor

基于WebDriverJs

利用WebDriverJs，可以借助于NodeJs直接调用浏览器接口

npm run Protractor 同样使用的是Jasmine的语法