前端開發環境（開發，除錯，測試工具）

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框架），所以這裡不詳細說明