前端开发环境（开发，调试，测试工具）

1.前言

本文意在讲解grunt入门以及如何搭建前端的开发环境。

2.步骤

  a.代码编辑工具

    这里推荐使用sublime,这是一款轻量级的编辑器，下载网址：http://www.sublimetext.com/3。

    webstorm和atom也是很不错的编辑器，不足之处就是比较大，没有sublime这么轻量级。

  b.断点调试工具

     1.DOM断点

     DOM断点是一个Firebug和Chrome DevTools提供的功能，当js需要操作打了断点的DOM时，会自动暂停，类似debugger调试。

     2.debugger断点

     需要调试js的时候，我们可以给需要调试的地方通过debugger打断点，代码执行到断点的地方就会暂停，这时候通过单步调试等方法就可以调试js代码。

  c.版本管理工具

    1.SourceTree和Git合用

     git经典开发过程

       1.从服务器上克隆数据库到自己的电脑上。

       2.在SourceTree上创建分支，修改代码，提交代码。

       3.可以通过fetch提取最新的代码版本。

       4.可以通过SourceTree向主分支提merge请求

     2.SubVersion(svn)

      SVN是最近几年崛起的版本管理工具，是CVS的接班人。

     SVN经典工作流程

        1.从服务器上下载项目组最新的代码。

        2.进入自己的分支，进行工作，每隔一段时间向服务器自己的分支提交一次代码。

        3.最后把自己IDE分支合并到服务器的主分支上，并向服务器提请求

d.代码合并和混淆工具

  这里要推荐的就是今天的主角grunt，它是一款搭建自动化的web 前端开发工具。

    1.首先，grunt以及grunt 的所有插件都是基于nodejs来运行的，所以第一步就是要安装nodejs（可以自行上官网下载安装），通过终端输入"node -v"可以查看nodejs是否安装成功以及nodejs的版本号

     2.安装grunt-CLI

 sudo npm install -g grunt-cli，安装完成后可以通过grunt命令来检验是否安装成功

     3.用sublime创建一个网站，里面包含三个文件夹（build src test）,以及package.json和Gruntfile.js

 打开package.json，编写如下代码

 {
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
  }
}

其中，devDependencies表示开发者依赖，即我们现在这个系统，将会依赖哪些开发工具

保存

     4.安装grunt

sudo npm install grunt --save-dev

在这里解释一下  --save-dev，它表示在当前目录安装grunt同时，顺便把grunt保存为这个项目开发者的依赖，跟上面的devDependencies都是依赖

安装完成后，打开package.json，可以看到如下代码

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
  }
}

这说明grunt已经安装成功了

此时可以在终端输入 $ grunt

     5.配置Gruntfile.js

首先我们先打开Gruntfile.js这个文件，编写如下代码

//包装函数
module.exports = function(grunt) {
// 任务配置，所有插件的配置信息
grunt.initConfig({
//获取 package.json的信息
pkg: grunt.file.readJSON('package.json')；
});
//告诉grunt当我们在终端输入grunt时需要做些什么(注意先后顺序)
grunt.registerTask('default', []);
};

保存，接着在终端输入 $grunt，可以看到有一个Done说明已经配置成功，grunt能使用了

     6.安装grunt插件

这里主要介绍三款插件

1.jshint --- js语法错误检查

2.watch --- 实时监控文件变化、调用相应的任务重新执行

3.uglify --- 压缩js代码

a.首先我们先来安装jshint

sudo npm install grunt-contrib-jshint 

然后打开package.json,添加如下代码

 //包装函数
module.exports = function(grunt) {
// 任务配置，所有插件的配置信息
grunt.initConfig({
//获取 package.json的信息
pkg: grunt.file.readJSON('package.json'),

                // jshint的配置信息
jshint: {
build: ['Gruntfile.js', 'src/*.js'],
options: {
jshintrc: '.jshintrc'
}
},
});

    //告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-jshint');
//告诉grunt当我们在终端输入grunt时需要做些什么(注意先后顺序)
grunt.registerTask('default', ['jshint']);
};

接着就是检验一下jshint有没有安装成功

在src目录下面添加一个test.js的文件，然后加入如下代码

(function(window, undefined){
function add(a,b){
return a + b;
}


add(10,100);
})(window);

保存

然后在 return a + b;中去掉;保存

接着在终端输入$grunt

可以看到如下结果

Running "jshint:build" (jshint) task

   src/test.js

      3 |        return a + b

                             ^ Missing semicolon.

>> 1 error in 2 files

Warning: Task "jshint:build" failed. Use --force to continue.

这时候就说明jshint已经安装成功了

b.接下来我们安装watch

步骤跟上面jshint的一致，这里就不重复了，直接写代码

sudo npm install grunt-contrib-watch

然后打开package.json,添加如下代码

 //包装函数
module.exports = function(grunt) {
// 任务配置，所有插件的配置信息
grunt.initConfig({
//获取 package.json的信息
pkg: grunt.file.readJSON('package.json'),

//watch的安装配置信息
watch: {
build: 
{
 files: ['src/*.js', 'src/*.css'],
 tasks: ['jshint', 'uglify'],
 options: {spawn: false}
   }
}
});

    //告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-watch');
//告诉grunt当我们在终端输入grunt时需要做些什么(注意先后顺序)
grunt.registerTask('default', ['watch']);
};

接着就是检验一下watch有没有安装成功

在终端输入 $grunt

看到如下结果

Running "jshint:build" (jshint) task

>> 2 files lint free.

Running "uglify:build" (uglify) task

>> 1 file created.

Running "watch" task

 表明watch已经安装成功了

c.最后我们安装uglify

步骤也是差不多的

sudo npm install grunt-contrib-uglify

然后打开package.json,添加如下代码

 //包装函数
module.exports = function(grunt) {
// 任务配置，所有插件的配置信息
grunt.initConfig({
//获取 package.json的信息
pkg: grunt.file.readJSON('package.json'),

uglify: {
options: {
stripBanners: true,
banner: '/*! <%=pkg.name%> - <%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/test.js',
dest: 'build/<%=pkg.name%> - <%=pkg.version%>.js.min.js'
}
},
});

    //告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-uglify');
//告诉grunt当我们在终端输入grunt时需要做些什么(注意先后顺序)
grunt.registerTask('default', ['uglify']);
};

此时我们打开build文件夹，可以看到里面有一个grunt_test - 1.0.0.js.min.js文件，这个就是test.js压缩后的文件了。

表明uglify也已经安装成功了

e.依赖管理工具

bower这个可有可无，如果需要安装，可以使用 sudo npm install bower进行安装

f.单元测试工具

安装karma以及它里面的测试框架jasmine

在终端输入 sudo npm install karma 以及 npm install -g karma-cl,这个是用于karma start命令的

接下来是设置karma的配置文件，karma init pro-conf.js，然后会跳出几个选择，会问以下几个问题，使用什么测试框架，在什么浏览器下测试，还有待测文件夹在哪里

此时可以新建一个待测文件夹，把要测试的代码放在里面即可

g.集成测试工具

protractor（只适用于Angular.js框架），所以这里不详细说明