Grunt教程——安裝Grunt

做者：大漠日期：2013-11-04 點擊：3124

tools

grunt

在上一節《Grunt教程——初涉Grunt》一文中介紹了Grunt是什麼，今天咱們主要一塊兒來學習和探討Grunt如何安裝。俗話說，巧婦難爲無米之炊，要想正常的使用Grunt，首要條件你要在本身的電腦環境中具有運行Grunt的環境。別的先不說了，咱們切入正題。php

概覽

Grunt和Grunt插件應該做爲項目依賴定義在你項目的package.json中。這樣就容許你使用一個單獨的命令:npm install安裝你項目中的全部依賴（在package.json中定義好的Grunt和Grunt插件在使用npm install時會自動安裝相關依賴，正如咱們已經瞭解到的，這些依賴定義在package.json中了）。當前穩定的和開發中的Grunt版本始終都列在wiki頁面上。css

安裝NodeJS

經過前面有關於Grunt譯文的相關介紹，咱們都知道，Grunt運行離不開NodeJS和NPM。所以要使用Grunt首要的條件，你的系統須要安裝NodeJS和NPM。html

接下來，簡單的瞭解一下NodeJS的安裝。html5

Mac下安裝NodeJS

若是你使用homebrew任務管理器，你能夠直接在終端執行下面的命令安裝NodeJS:node

$ brew install node

或者採用下面的步驟安裝NodeJS:python

安裝Xcode
安裝git
在終端運行下面的命令

git clone git://github.com/ry/node.git 
               
                 cd node 
                
               
                 ./configure 
                
               
                 make 
                
               
                 sudo make install

Ubuntu下安裝NodeJS

首先你要安裝一些依賴項：git

sudo apt-get 
                 
                   install g++ libssl-dev apache2-utils 
                  
                 
                   sudo apt- 
                 
get install git-core

接下來在命令終端執行：github

git clone git://github.com/ry/node.git 
               
                 cd node 
                
               
                 ./configure 
                
               
                 make 
                
               
                 sudo make install

Windows下安裝NodeJS

在Windows下安裝NodeJS，須要使用cygwin。並按下面的步驟進行安裝：redis

安裝cygwin,接下來在cygwin項目中使用setup.exe安裝下面的包：sql

devel → openssl
devel → g++-gcc
devel → make
python → python
devel → git

經過Start → Cygwin → Cygwin Bash Shell打開cygwin命令行，執行下面的命令安裝NodeJS:

git clone git://github.com/ry/node.git 
               
                 cd node 
                
               
                 ./configure 
                
               
                 make 
                
               
                 sudo make install

以上資源來自於How to Install Node.js一文，若是你以爲這樣安裝NodeJS可能比較繁瑣，能夠直接進入Nodejs官網中下載各系統所須要的安裝包進行安裝。

擴展閱讀

安裝NPM

裝好NodeJS後，能夠在你的終端執行下面的命令安裝NPM:

curl http://npmjs.org/install.sh | sh

若是這樣安裝失敗，或許你要在上面的命令以前加上sudo，並按提示輸入你的用戶密碼。詳細的安裝請點擊這裏查閱。

若是須要檢驗安裝NodeJS或NPM是否要成功，能夠經過下面的命令來檢驗：

$  
               
                 node -v 
                
               
                 v 
               
0.10.13$ npm -v1.3.2

這樣你的NodeJS和NPM表示安裝成功。

安裝CLI

這裏要介紹的Grunt是0.40版本，若是你的系統安裝了Grunt 0.3，或者想從Grunt 0.3升級而來，你須要先卸載：

$ npm uninstall -g grunt

爲了方便使用Grunt，你應該在全局範圍內安裝Grunt的命令行接口(CLI)。要作到這一點，須要在命令行中執行：

$ npm install -g grunt-cli

這條命令將會把grunt命令植入到你的系統路徑中，這樣就容許你從任意目錄中運行Grunt(定位到任意目錄運行grunt命令)。

注意：安裝grunt-cli並不等於安裝了Grunt任務運行器! Grunt CLI的工做很簡單：在Gruntfile所在目錄調用運行已安裝好的相應版本的Grunt。這就意味着能夠在同一臺機器上同時安裝多個版本的Grunt。

CLI如何工做

每次運行grunt時，它都會使用node的require()系統查找本地已安裝好的grunt。正由於如此，你能夠從你項目的任意子目錄運行grunt。

若是找到本地已經安裝好的Grunt，CLI就會加載這個本地安裝好的Grunt庫，而後應用你項目中的Gruntfile中的配置(這個文件用於配置項目中使用的任務，Grunt也正是根據這個文件中的配置來處理相應的任務)，並執行你所指定的全部任務。

想要真正的瞭解這裏發生了什麼，能夠閱讀源碼。這份代碼很短。

安裝指定版本的Grunt

若是你要安裝指定版本的Grunt或者Grunt插件，只須要在命令行中運行：

$ npm install grunt@VERSION --save-dev

其中VERSION就是你所須要的版本(指定版本號便可)。這樣會安裝指定版本的Grunt或者插件，並將它做爲你的項目依賴添加到package.json。

拿個簡單的Grunt項目來講，先在你本地建立一個本地項目，這裏我將其命名爲「installGrunt」。

$ mkdir installGrunt$ cd installGrunt

接下來在命令終端中運行下面的命令：

$ npm install grunt --save-dev

你會在你的命令終端看到下面的安裝信息：

 
               
                 ... 
                
               
                 npm http 
               
304 https://registry.npmjs.org/underscore 
               
                 .string 
                
               
                 npm http 
               
304 https://registry.npmjs.org/underscoregrunt@0.4.1 
               
                 node_modules/grunt 
                
               
                 ├── which 
               
@1.0.5├── dateformat@1.0.2-1.2.3├── eventemitter2@0.4.13├── colors@0.6.2├── hooker@0.2.3├── async@0.1.22├── lodash@0.9.2├── coffee-script@1.3.3├── underscore.string@2.2.1├── iconv-lite@0.2.11├── nopt@1.0.10 (abbrev@1.0.4 
               
                 ) 
                
               
                 ├── findup-sync 
               
@0.1.2 (lodash@1.0.1 
               
                 ) 
                
               
                 ├── glob 
               
@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3 
               
                 ) 
                
               
                 ├── minimatch 
               
@0.2.12 (sigmund@1.0.0, lru-cache@2.3.1 
               
                 ) 
                
               
                 ├── rimraf 
               
@2.0.3 (graceful-fs@1.1.14 
               
                 ) 
                
               
                 └── js-yaml 
               
@2.0.5 (esprima@1.0.4, argparse@0.1.15)

在命令行中輸入：

$  
               
                 grunt --version 
                
               
                 grunt-cli v 
               
0.1.9grunt v0.4.1

表示在項目中已成功安裝了Grunt。

從前面的教程中咱們能夠很清楚的知道，要正確運行Grunt項目，必須依賴於package.json和Gruntfile.js文件，所以咱們緊接下來須要在項目的根目錄下建立這兩個文件：

$ touch package.json Gruntfile.js

依照前面的教程，咱們將安裝的Grunt，添加到package.json中，成爲其依賴關係：

package.json:

 
               
                 { 
                
               
                     " 
               
name":"install-grunt" 
               
                 , 
                
               
                     " 
               
description": "Example project to demonstrate Grunt." 
               
                 , 
                
               
                     " 
               
version":"0.1.0" 
               
                 , 
                
               
                     " 
               
private": true 
               
                 , 
                
               
                     " 
               
author":  
                 
                   { 
                  
                 
                           " 
                 
name": "w3cplus" 
                 
                   , 
                  
                 
                           " 
                 
email": "w3cplus@hotmail.com"    } 
               
                 , 
                
               
                     " 
               
devDependencies":  
                 
                   { 
                  
                 
                           " 
                 
grunt": "~0.4.0"    }}

其實咱們經常安裝Grunt和Grunt插件的方法和上面的是反過來的，先建立package.json文件中添加所須要的Grunt或Grunt插件，好比說如今須要在項目中添加一個Grunt的插件Sass，咱們先在package.json文件中的devDependencies中添加相關的依賴關係：

 
               
                 { 
                
               
                     " 
               
name":"install-grunt" 
               
                 , 
                
               
                     " 
               
description": "Example project to demonstrate Grunt." 
               
                 , 
                
               
                     " 
               
version":"0.1.0" 
               
                 , 
                
               
                     " 
               
private": true 
               
                 , 
                
               
                     " 
               
author":  
                 
                   { 
                  
                 
                           " 
                 
name": "w3cplus" 
                 
                   , 
                  
                 
                           " 
                 
email": "w3cplus@hotmail.com"    } 
               
                 , 
                
               
                     " 
               
devDependencies":  
                 
                   { 
                  
                 
                           " 
                 
grunt": "~0.4.0" 
                 
                   , 
                  
                 
                           " 
                 
grunt-contrib-sass":"*"    }}

建立好依賴關係後，在命令行中執行：

$ npm install sass --save-dev

執行命令後，能夠看到相關提示信息：

npm http GET https://registry.npmjs.org/sassnpm http 304 https://registry.npmjs.org/sasssass@0.5.0 node_modules/sass

這裏僅安裝了一個Grunt插件，若是同時安裝多個Grunt插件時，一條一條這樣執行彷佛非常麻煩，其實還有一種更好的方式，先在package.json文件中添加須要的Grunt插件依賴關係：

 
               
                 { 
                
               
                     " 
               
name":"install-grunt" 
               
                 , 
                
               
                     " 
               
description": "Example project to demonstrate Grunt." 
               
                 , 
                
               
                     " 
               
version":"0.1.0" 
               
                 , 
                
               
                     " 
               
private": true 
               
                 , 
                
               
                     " 
               
author":  
                 
                   { 
                  
                 
                           " 
                 
name": "w3cplus" 
                 
                   , 
                  
                 
                           " 
                 
email": "w3cplus@hotmail.com"    } 
               
                 , 
                
               
                     " 
               
devDependencies":  
                 
                   { 
                  
                 
                           " 
                 
grunt": "~0.4.0" 
                 
                   , 
                  
                 
                           " 
                 
grunt-contrib-sass":"*" 
                 
                   , 
                  
                 
                           " 
                 
grunt-contrib-jshint":"*" 
                 
                   , 
                  
                 
                           " 
                 
grunt-contrib-uglify":"*" 
                 
                   , 
                  
                 
                           " 
                 
grunt-contrib-watch":"*"    }}

添加完所需的依賴關係以後，能夠在終端執行：

$ npm install

就能夠一次性安裝package.json文件中所聲明的依賴關係的grunt插件。同時會在你項目的根目錄下添加一個node_modules目錄，目錄中會放置對應grunt插件所需的插件目錄名：

 
               
                 installGrunt 
                
               
                 | 
               
----Gruntfile.js|----node_modules|----+----grunt|----+----grunt-contrib-jshint|----+----grunt-contrib-sass|----+----grunt-contrib-uglify|----+----grunt-contrib-watch|----package.json

注意：當你給npm install添加--save-dev標誌時，一個波浪線範圍將被用於你的package.json中。一般這麼作是很好的，由於若是指定版本的Grunt或Grunt插件有更新補丁出現時，它將自動升級到開發中的版本，與semver對應。

特別注意：在package.json文件中的name參數值中不能含有任何空格或者以陀峯命名。

安裝已發佈的開發版本的Grunt

一般當新功能開發完成後，Grunt構建均可能會按期被髮布到npm中。沒有顯式指定的版本號，這些構建不可能安裝到依賴中，一般它會有一個內部版本號或者alpha/beta指定候選版本號。

與安裝指定版本的Grunt同樣，運行npm install grunt@VERSION --save-dev其中VERSION就是你所須要的版本，同時npm將會安裝那個版本(所指定版本的模塊)的Grunt到你的項目目錄中(一般都會安裝到node_modules中)，並把它添加到package.json依賴中。

注意：若是你沒有注意指定版本號，都會有一個波浪線的版本範圍將被指定到package.json中。這是很是糟糕的，由於指定開發版本的模塊都是新的，多是不兼容的，若是開發發佈的補丁經過npm被安裝到你的package.json中會有可能破壞你的構建工做。

在這種狀況下手動的編輯你的package.json是很是重要的，而且你應該從package.json中的版本號中移除~(波浪線)。這樣就會鎖定你所指定的精確的開發版本(穩定並安裝好的依賴模塊)。

這種方式一樣也能夠用於安裝已發佈的開發版本的Grunt插件。

一般發佈的開發版都只是做爲源代碼提交到指定的倉庫如Github等，可能並無做爲npm模塊正式發佈。在使用的過程當中，建議按需添加穩定版本的依賴模塊。若是你有足夠的信心，也能夠嘗試使用最新的未正式發佈的模塊來知足工做需求。——@Toobug

從Github上直接安裝

若是你想安裝一個最新版本的，未正式發佈的Grunt或者Grunt插件，按照說明你能夠指定一個Git URL做爲依賴，注意這裏必定要指定一個實際提交的SHA(而不是一個分支名)做爲commit-ish。這樣就會保證你的項目老是使用明確版本的Grunt。

指定的Git URL可能來自於Grunt官方或者分支。

本文主要介紹瞭如何在系統中安裝Grunt和Grunt插件。但願這篇文章對初學者有必定的幫助。

特別聲明：本教程中不少內容摘自如下相關文章，在此特別感謝他們爲咱們提供這麼優秀的教程：

How to Install Node.js via Node Knockout
新手上路 via Toobug && Basecss
安裝Grunt via Toobug && Basecss

如需轉載，煩請註明出處：http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html

上一篇: 如何使用Sass和SMACSS維護CSS | 下一篇: 使用Grunt實現自動化工做流

Grunt教程——安裝Grunt

Grunt教程——安裝Grunt

概覽

安裝NodeJS

Mac下安裝NodeJS

Ubuntu下安裝NodeJS

Windows下安裝NodeJS

擴展閱讀

安裝NPM

安裝CLI

CLI如何工做

安裝指定版本的Grunt

安裝已發佈的開發版本的Grunt

從Github上直接安裝

Attachment List