如何用Grunt.js管理項目

本文介紹如何用Grunt.js管理項目。

Grunt.js簡介：

Grunt.js是一個Javascript Task Runner（Javascript任務運行器），其基於NodeJS，可用於自動化構建、測試、產生文檔的專案管理工具。

Grunt.js並不是僅僅是構建工具，實際上他只是任務運行器，管理每個子任務的自動化運行，我們還能使用他做更多東西。

為什麼使用Grunt.js？

簡單的說：為了自動化。

對於前端項目，例如：

為了明確模組分工，我們可能會將Javascript代碼拆成很小很小的一個個js檔案，但是我們知道，在最終頁面上，我們知道過多的js檔案會產生過多的Http Request，這不利於頁面最佳化。所以我們可能希望可以合并這些js檔案的工具。

為了使用者端請求的檔案盡量小，我們希望我們的HTML、Javascript等檔案能進行壓縮。

我們可能需要對原始碼進行一些單元測試和迴歸測試。

我們可能希望有工具能夠通過原始碼備忘自動產生文檔，免得手動再寫文檔。

……

很明顯，這一切都有各種各樣的小工具能幫我們做到，但是我們希望最好能輸入一個命令，開啟一個程式，或者乾脆每次修改檔案儲存後自動進行這一切事情。

以前我們可能使用NodeJS自己寫一個build程式，但是現在Grunt.js能夠提供我們需要的一切。

安裝Grunt.js

Grunt.js 0.4之後，其不再使用全域方式安裝整個Grunt.js，而是在全域安裝Grunt.js Client，然後在當前項目中安裝Grunt，來避免未來不同項目對Grunt不同版本的依賴關係。

如果安裝了之前的版本，可以使用npm的命令來刪除掉原來的Grunt.js。

npm uninstall -g grunt

然後安裝Grunt.js Client：

npm install -g grunt-cli

package.json

package.json是項目的設定檔，有一些項目的依賴資訊，以及作者、版本等資訊。我們先寫一個簡單的package.json。

{  "name": "my-project",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.1"  }}

name屬性，表示該項的名字。

version屬性，則是該項目的版本號碼。

devDependencies屬性，則包含該項目的依賴，目前我們的依賴只有grunt，以及版本為0.4.1。

在終端大概包含該package.json的目錄，輸入命令：