# 未完待續 http://div.io/topic/1332 思索：我們使用bower下載了3個庫，每次下載后，都需要將其引入到index.html中。這導致，我們重復了3次大概相同的操作。是不是可以有一種方法，而使用這個方法，我們只需要一個加入簡單的幾行代碼呢？ JS的大牛們何嘗沒有看到這一點。有一個工具，叫做grunt。是的，就是我常說的那個牛頭。 下面，讓我們共同來體現下grunt自動處理的神奇。 # 安裝grunt-cli grunt-cli是一個grunt的控制臺。打個比喻，grunt如果是mysql的話,grunt-cli就是navicat. 要想使用grunt，grunt-cli是必不可少的。 `npm install grunt-cli -g` > MAC下可能需要輸入: `sudo npm install grunt-cli -g` # grunt初始化 和bower相同的是，grunt也需要一個配置文件。 和angularjs相同的是：grunt只是一個主要的程序，這個程序還有很多個插件，比如我們即將使用的grunt-bower-concat。grunt與grunt-wiredep的關系 和 angularjs與angular-route的關系是相同的。 所以，我們可以這樣理解：grunt和grunt-bower-concat和bower都是npm管理的軟件。 bower是一個包管理器，它管理了bootstrap,angularjs,angular-route. npm也是一個包管理器，它管理了bower, grunt, grunt-bower-concat，http-server。 那么：當我們需要使用angularjs、angular-route時，需要配置bower;當我們需要使用grunt、grunt-bower-concat的時候，我們需要配置的npm。 ## 配置npm. 關于npm的命令，我們可以使用`npm --help`來查看。 我們使用`npm init`來創建一個npm的配置文件。 ~~~ name: (angularjs) version: (1.0.0) description: the guide of angularjs entry point: (app.moudle.js) test command: git repository: (https://github.com/yunzhiclub/angularjsguide.git) keywords: yunzhiclub angularjs guide author: panjie@yunzhiclub.com license: (ISC) ... ~~~ 查看生成的文件 `package.json` ~~~ { "name": "angularjs", "version": "1.0.0", "description": "the guide of angularjs ", "main": "app.moudle.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/yunzhiclub/angularjsguide.git" }, "keywords": [ "yunzhiclub", "angularjs", "guide" ], "author": "panjie@yunzhiclub.com", "license": "ISC", "bugs": { "url": "https://github.com/yunzhiclub/angularjsguide/issues" }, "homepage": "https://github.com/yunzhiclub/angularjsguide#readme" } ~~~ > sublime還需要配置一下文件格式喲。ctrl+shif+p -> grunt json ## 添加grunt 配置完npm后，我們將grunt添加到npm的配置文件中。說明，我們需要在這個項目中使用grunt. 在上一節中，我們是手工的加入了依賴的代碼。在這，我們使用一個`--save-dev`參數來實現這個目標： `npm install grunt --save-dev` 安裝完畢后，我們可以使用`grunt --version`來查看版本信息。 ~~~ panjiedeMacBook-Pro:angularjs panjie$ grunt --version grunt-cli v1.2.0 grunt v1.0.1 ~~~ 此時，在package.json文件中，還增加了以下幾行代碼： ~~~ "devDependencies": { "grunt": "^1.0.1" } ~~~ 我們說，這樣有什么好處呢？好處之一就是：我在本地的開發環境，依賴的插件，都可以通過這一個文件傳遞給團隊的其它成員了。 如果沒有這個文件，真的想不出我們可以使用什么方法來保障團隊開發工具的一致性。 ## 添加grunt-bower-concat grunt-bower-concat可以實現自動為我們添加JS,CSS的引用。下面，我們來添加這個軟件。 `npm install grunt-bower-concat --save-dev` # 使用grunt-wiredep 和運行bower npm一樣，我們的grunt也需要一個配置文件 -- Gruntfile.js。但我并沒有找到初始化這個文件的命令，所以只好手動建立一個了。 和前面一樣，建立后，我們更改下這個文件的格式，讓sublime來自動為我們查找拼寫方面的錯誤。  ## Gruntfile.js 簡單說下 Gruntfilejs 它由以下幾部分構成： "wrapper" 函數 項目與任務配置 加載grunt插件和任務 自定義任務 ### "wrapper" 函數 wrapper我們在HTML\CSS的學習中應該已經接觸過了，如果非要譯成中文，可以譯為：包裝，容器的意思。 每一份 Gruntfile （和grunt插件）都遵循同樣的格式，你所書寫的Grunt代碼必須放在此函數內： 它的格式是這樣： ~~~ module.exports = function(grunt) { } ~~~ 上面定義了一個`grunt`的wrapper，所有關于grunt的配置，需要寫在這個函數中. ### 項目和任務配置 大部分的Grunt任務都依賴某些配置數據，這些數據被定義在一個object中，并傳遞給grunt.initConfig方法。