Grunt搭建自動化web前端開發環境

說明：以下爲windows環境示例

前期準備

安裝Node.js

• 下載Node.js
  下載地址https://nodejs.org/
  奇數版本號的 Node.js 被認爲是不穩定的開發版。so下載偶數版本的。

• 安裝Node.js
  將下載好的文件雙擊打開進行“下一步”式的安裝。

  運行以下命令，得到版本號，則安裝成功

node -v

Grunt和 Grunt 插件是通過 npm 安裝並管理的，npm是 Node.js 的包管理器。因此安裝好Node.js，就可以開始Grunt的安裝了。

步入正軌

安裝CLI

首先確保網絡暢通，否則幾個小時都安裝不好那就很悲劇了。
其次需要先將Grunt命令行（CLI）安裝到全局環境中。
運行以下命令，執行完成則可以全局使用Grunt命令

npm install -g grunt-cli

安裝Grunt

首先我們準備一個工作目錄testProject
在這個目錄下我們先創建一個文件package.json
package.json: 此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。

package.json中的代碼片段

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {

  }
}

package.json文件配置好後，運行以下命令

npm install grunt --save-dev

運行結束，我們看到Grunt最新版本被安裝到項目目錄中，並將其添加到devDependencies內

package.json中的代碼片段

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

再運行以下命令

npm install grunt-contrib-jshint --save-dev

devDependencies中的內容又有變化

package.json中的代碼片段

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0"
  }
}

通過以上命令，安裝了指定插件，還會自動將其添加到devDependencies 配置中。
我們也可以將devDependencies中提前配置所需要的grunt及插件，則會按照配置的插件版本去安裝。

Gruntfile: 此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的。 此文檔中提到的 Gruntfile 其實說的是一個文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

Gruntfile.js 中的代碼片段

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
  });
};

未完待續