前端开发环境调研

前端工具的队伍阵容庞大，为了方便自己随时查阅如何安装以及学习的教程，便写了如下总结，以下内容还不完善，后续会不断更新此文章。仅适用于新手，欢迎分享与交流以及纠正。

------------------------------前端工具概览-----------------------------------

代码编辑工具：sublime（更轻量），webstorm（更强大），Emacs、Vim(神的编辑器和编辑器之神)

断点调试工具：chrome插件AngularBatarang，Firefox插件firebug

版本管理工具：git, msygit, tortoisegit, github

代码合并和混淆工具：grunt(uglify对代码进行混淆，concat合并代码，watch监控文件变化)

依赖管理工具：bower

单元测试工具：karma, jasmine

集成测试工具：protractor

----------------------------------------------------------------------------------------------------------------------

 

NodeJS（其他工具的基础平台）

官网https://nodejs.org/下载直接安装（同时会自动绑定安装包管理器npm）。

命令行输入node -v 查看NodeJs的版本。命令行输入npm -v查看npm的版本。

命令行输入npm update -g npm自动更新npm

 

----------------------------------------------------------------------------------------------------------------------

 

Grunt（代码混淆合并的构建工具）

学习网站http://www.gruntjs.net/getting-started

npm uninstall -g grunt 卸载之前的版本

npminstall grunt-cli -g全局安装grunt命令行工具，可以在任意路径下执行grunt命令。

 

注1：-g代表全局安装，Grunt有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli）。
注2：安装grunt-cli并不等于安装了grunt！grunt CLI的任务很简单：调用与Gruntfile在同一目录中的grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的grunt。而grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块。这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本。

 

如果某项目已经有好package.json 和 Gruntfile 文件，则可直接进入该项目的根目录下：

执行npm install命令安装项目依赖的库。

执行 grunt 命令。

grunt --help 命令列出所有已安装的Grunt任务（task）

 

如果是第一次，一般需要在项目中添加两份文件：package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。而且可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

Gruntfile.js/Gruntfile.coffee: 读取package信息；配置或定义任务（task）并加载Grunt插件

 

以下三种为项目创建package.json文件的方式：

1. 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。

2. npm init命令会创建一个基本的package.json文件。

3. 在项目根目录下，新建package.json，内容如下：

{//这些属性都可以被gruntfiles里面的方法取到  "name": "my-project-name",//模块名称，只能有字母数字中划线，若为空则用项目                            //文件夹名称代替  "version": "0.1.0",     //版本号  "description": "demo",   //描述  "license": "MIT",  "devDependencies": {    //依赖包,指定了项目依赖的Grunt和Grunt插件版本    "grunt": "~0.4.5",   //指定版本，若为”*”则是安装最新版本。    "grunt-contrib-jshint": "~0.10.0",//    "grunt-contrib-nodeunit": "~0.3.1",    "grunt-contrib-concat": "~0.4.1",  //代码合并    "grunt-contrib-uglify": "~0.5.0"  //代码压缩    "grunt-contrib-requirejs": "~0.4.1",    "grunt-contrib-copy": "~0.4.1","grunt-contrib-clean": "~0.5.0",  "grunt-contrib-watch": "^0.6.1",  //watch监控代码变化    "grunt-strip": "~0.2.1"  },  "dependencies": {    "express": "3.x"  }}

其他：
description:　　　　　　　// 描述：会在npm搜索列表中显示
entry point: (index.js)　// 模块入口文件
test command:　　　　　　　// 测试脚本
git repository:　　　　　　// git仓库地址
keywords:　　　　　　　　　// 关键字：用于npm搜索，多个关键字用空格分开
author:　　　　　　　　　　// 作者
license: (BSD-2-Clause) 　// 开源协议

然后执行npm install，则会根据package.json中的devDependencies 字段来安装对应版本的插件。

如果已经存在package.json 文件，则可以

执行npm install <module> --save-dev命令来添加Grunt和grunt插件，因为指令后面跟着--save-dev，所以添加插件之后，会自动将其写入package.json里devDependencies配置段。<module>为模块名。否则则不会更新package.json

如：

npm install grunt --save-dev   安装Grunt最新版本

npm install grunt-contrib-jshint--save-dev  安装JSHint 任务模块最新版本

注意如果项目要提交的话，安装插件之后要记得提交更新之后的 package.json

 

在项目根目录下新建Gruntfile.js/Gruntfile.coffee。内容如下：

module.exports= function(grunt) {   //”Wrapper”函数    // 项目与任务配置    grunt.initConfig({        //package.json文件中的项目元数据（metadata）被导入到 Grunt 配置中        pkg: grunt.file.readJSON('package.json'),// grunt-contrib-uglify 插件中的uglify 任务（task）被配置为压缩（minify）源码文件并依据上述元数据动态生成一个文件头注释。        uglify: {            options: {                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'            },            build: {                src: 'src/<%= pkg.name %>.js',                dest: 'build/<%= pkg.name %>.min.js'            }        }    });//当在命令行中执行 grunt 命令时，uglify 任务将被默认执行。    // 加载grunt插件和任务。    grunt.loadNpmTasks('grunt-contrib-uglify');//加载"uglify" 任务的插件。    // 默认被执行的任务列表。    grunt.registerTask('default', ['uglify']);};

"wrapper"函数

每一份 Gruntfile （和grunt插件）都遵循同样的格式，我们编写的Grunt代码必须放在此函数内：

module.exports= function(grunt) {};

 

项目和任务配置

// 项目于任务配置。大部分的Grunt任务都依赖某些配置数据，这些数据被定义在一个object内，并传递给grunt.initConfig 方法。grunt.initConfig({//grunt.file.readJSON('package.json') 读取配置文件，将存储在package.json文件中的JSON元数据引入到grunt config中，之后便可以以pkg.XXX方式访问数据    pkg: grunt.file.readJSON('package.json'),//<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作。我们可以在这个配置对象中(传递给initConfig()方法的对象)存储任意的数据，只要它不与你任务配置所需的属性冲突，否则会被忽略。此外，由于这本身就是JavaScript，所以不仅限于使用JSON；我们可以在这里使用任意的有效的JS代码。//与大多数task一样，grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。    uglify: {        options: {    //我们指定了一个banner选项(用于在文件顶部生成一个注释)，注释为package的name+日期            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'        },        build: {   //一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件            src: 'src/<%= pkg.name %>.js',//指定源文件路径            dest: 'build/<%= pkg.name %>.min.js'//指定目的路径和文件名        }    }});

 

加载 Grunt插件和任务

像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务（task）都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：

// 加载包含 "uglify" 任务的插件。grunt.loadNpmTasks('grunt-contrib-uglify');

 

注意： grunt --help 命令将列出所有可用的任务。

 

自定义任务

通过定义 default 任务，可以让Grunt默认执行一个或多个任务。如下，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 gruntdefault的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

// 默认被执行的任务列表。grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任务（task）不能满足项目需求，还可以在Gruntfile中自定义任务（task）。例如，在下面的 Gruntfile 中自定义了一个default 任务，并且它甚至不依赖任务配置：

module.exports= function(grunt) {    // 一个基本的默认任务.    grunt.registerTask('default', 'Log some stuff.', function() {        grunt.log.write('Logging some stuff...').ok();    });};

特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks方法加载。

 

grunt watch启动监控，改代码就会实时进行压缩合并等相关操作

grunt concat:foo只会处理指定目标的配置

----------------------------------------------------------------------------------------------------------------------

Bower   （需要有node，npm和git，官方网站：http://www.bower.io）

四个功能：注册机制、文件存储、上传下载、依赖分析。

 

npm install -g bower全局安装bower

进入项目文件夹：

bower install <package> 即把package安装到了项目下的bower_components文件夹中

例如：

bower install bootstrap 安装bootstrap

bower install jquery 安装jQuerybowerinstall jquery#1.7.2安装指定版本

bower install angularjs 安装Angularjs

 

package也可以是github缩略语，git终端文件，或者网址，例如：

bower install desandro/masonry

bower install git://github.com/user/package.git

bower install http://example.com/script.js

 

使用说明：

Usage:    bower <command> [<args>] [<options>]Commands:cache                   bower缓存管理cache list                   查看本地bower缓存的类库help                    显示Bower命令的帮助信息home                    通过浏览器打开一个包的github发布页info                    查看某包的信息init                    创建bower.json配置文件install                 在项目中安装一个包link                    建立一个包的链接list                    列出项目已经安装的包，以及可用的更新，以及依赖情况login                   GitHub验证，存储凭证lookup                  根据包名查询包的urlprune                   删除与项目无关的包register                注册一个包search                  根据名字搜索包update                  更新项目的某包uninstall               移除项目的某包unregister              从注册信息中移除一个包version                 显示包的版本信息Options:-f, --force            强制性执行命令-j, --json             输出可用的JSON-l, --log-level            报告日志级别-o, --offline           不联网-q, --quiet             只输出重要信息-s, --silent            除了错误以外不输出任何东西-V, --verbose           冗长输出--allow-root            允许作为root用户来运行命令--version               输出bower的版本--no-color              禁用颜色

 

bower init初始化了bower.json文件后，如果又加入了包，想要自动写入到bower.json里，可以在安装包时添加save参数：bower install packagename --save

 

用bower提交自己的类库：

1). 生成bower.json配置文件

bower int

2). 在github创建一个资源库：nodejs-bower
3). 本地工程绑定github

git int

git add .   (注意这儿有一个点儿)

git commit -m "first comit"

git remote add origin https://github.com/Sharonzd/nodejs-bower

git push -u origin master

 

4). 注册到bower官方类库

bower register nodejs-bower [e-mail]:Sharonzd/nodejs-bower.git

5).查询我们自己的包

bower search nodejs-bower

6).安装我们自己的包

bower install nodejs-bower

 

----------------------------------------------------------------------------------------------------------------------

 

Express （Nodejs开发框架）

npm install -g express 全局安装express最新版本

由于版本更新到了4.x，所以不能识别指令。

解决办法：

1. 卸载该最新版本npm uninstall -gexpress安装指定版本npm install -g express@3.5.0

2. 安装最新版本的同时安装命令行工具：卸载当前版本npm uninstall -gexpress（注意卸载是不要带版本号，否则会查找不到），安装最新版本npm install -g express同时安装全局命令行工具npm install -gexpress-generator

查看版本 express -V（注意是大写，如果-v不能识别，则为-V，否则就是--version）

 

实例：

创建一个工程express helloworld 或者express -e helloworld支持ejs

它会提示你，安装的依赖关系。可以如上，cd helloworld&& npm install同时执行，或者分别执行：进入工程文件夹cd helloworld，使用npm添加依赖npm install

然后使用npm启动npm start

此时，新创建的helloworld就已经运行在3000端口上

在浏览器输入http://localhost:3000/即刻访问到express欢迎页面

 

----------------------------------------------------------------------------------------------------------------------

 

http-server(一款轻量级的server，可以用来模拟后台数据)

https://github.com/nodeapps/http-server

npm install http-server -g全局安装

命令行进入项目文件夹，输入http-server，即可启动服务。

端口号为8080。所以可以在浏览器访问本地文件。

在浏览器输入http://localhost:8080/bower.json，即可以访问到当前文件夹下面的bower.json文件。

按下Ctrl+C即可退出服务

 

----------------------------------------------------------------------------------------------------------------------

 

Karma（单元测试工具runner）http://karma-runner.github.io/0.12/index.html

npm install -g karma 全局安装karma

npm install -g karma-cli 配置全局指令(必选，否则karma指令不能识别)

注意karma要求node的版本为0.8或者0.10（但其实我的node版本更高，暂时还没有发现影响）

karma只是一款用来跑测试用例的容器，需要结合Jasmine的使用

npm intsall karma-jasmine karma-chrome-launcher karma-coverage--save-dev在当前项目文件夹下安装这些karma插件（按需）

karma-chrome-launcher  用来启动chrome浏览器

karma-coverage   进行代码覆盖率检查

karma-jasmine    编写测试用例的工具

在项目文件夹（含有karma.conf.js配置文件）下 karma start则启动测试用例，自动打开chrome浏览器，cmd上显示测试信息。测试用例是否成功，如果测试失败，会报错并显示错误信息。

更改测试用例代码后，会自动重新运行测试用例。

Ctrl+C退出karma服务

 

----------------------------------------------------------------------------------------------------------------------

 

Jasmine（单元测试工具）

http://jasmine.github.io/

类似于Java里面的JUnit，提供了一套语法，用来编写测试用例。

四个核心概念：分组、用例、期望、匹配

分别对应四个函数：

describe(string,function)        表示分组，即一组测试用例

it(string,function)                 表示测试用例

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

to***(arg)                           表示匹配

 

----------------------------------------------------------------------------------------------------------------------

 

Protractor（专门为AngularJS定制的集成测试工具，专用）

https://github.com/angular/protractor  protractor源码和介绍

https://code.google.com/p/selenium/wiki/WebDriverJsWebDriver用户指南

基于WebDriveJS（用来和客户端的各种浏览器进行通讯的开源驱动，通用），protractor可以利用WebDriveJS，通过NodeJS直接调用浏览器的接口，从而完成测试工作。

 

 

例子：

进入angular-phonecat项目文件夹，输入npm start启动server

然后在angular-phonecat项目文件夹下，输入npm run protractor 运行protractor，则会自动调出chrome自动运行所有的测试用例。

 

----------------------------------------------------------------------------------------------------------------------

 

一个完整的项目目录结构：

----------------------------------------------------------------------------------------------------------------------

 

其他工具

Powercmd更加方便的命令行工具

直接在www.powercmd.com下载后便可以使用

 

AxureRP（UI设计工具）

直接安装，通过控件的拖动即可实现界面的设计，可添加点击事件，可在浏览器中预览，可以生成HTML文件。

学习网站http://www.axure.com/learn/core/pages?src=gs

http://www.webppd.com/thread-7915-1-1.html（付费培训教程）