前端开发入门 --摘自慕克网大漠穷秋
2014-11-02 11:27
316 查看
一、需要什么样的前端开发工具
代码编辑工具、断点调试工具、版本管理工具、代码合并和混淆工具、依赖管理工具、单元测试工具、集成测试工具
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的语法
代码编辑工具、断点调试工具、版本管理工具、代码合并和混淆工具、依赖管理工具、单元测试工具、集成测试工具
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的语法
相关文章推荐
- 前端开发入门--工具篇
- web前端开发入门提高 js书籍(附下载地址)
- web前端开发分享-css,js入门篇(转)
- 前端开发入门:前端开发基础成长指南
- 前端开发入门:html和css基础知识回顾2
- ant入门指南—web前端开发七武器(1)
- 前端开发入门:前端开发环境构建工具Grunt
- 模块化前端开发入门指南(二)
- 模块化前端开发入门指南(一)
- 前端开发入门:框架篇-ExpressJS入门学习
- web前端开发七武器—Jasmine入门教程(上)
- web前端开发七武器—ant入门指南(1)
- 精选在线课程:前端开发入门、进阶与实战(中文系列)
- 模块化前端开发入门指南(三)
- Web前端从入门到精通-2 关于html和开发工具
- 用flex+BlazeDS做前端开发web入门小例
- 1. web前端开发分享-css,js入门篇
- MVC5开发前端框架angularJS快速入门(一)
- MVC5开发前端框架AngularJS快速入门之Service
- 前端开发入门:框架篇-Yeoman入门学习