Grunt教程——安裝Grunt

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

在上一節(jié)《Grunt教程——初涉Grunt》一文中介紹了Grunt是什么，今天我們主要一起來學(xué)習(xí)和探討Grunt如何安裝。俗話說，巧婦難為無米之炊，要想正常的使用Grunt，首要條件你要在自己的電腦環(huán)境中具備運行Grunt的環(huán)境。別的先不說了，我們切入正題。

概覽

Grunt和Grunt插件應(yīng)該作為項目依賴定義在你項目的package.json中。這樣就允許你使用一個單獨的命令:npm install安裝你項目中的所有依賴（在package.json中定義好的Grunt和Grunt插件在使用npm install時會自動安裝相關(guān)依賴，正如我們已經(jīng)了解到的，這些依賴定義在package.json中了）。當(dāng)前穩(wěn)定的和開發(fā)中的Grunt版本始終都列在wiki頁面上。

安裝NodeJS

通過前面有關(guān)于Grunt譯文 的相關(guān)介紹，我們都知道，Grunt運行離不開NodeJS和NPM。因此要使用Grunt首要的條件，你的系統(tǒng)需要安裝NodeJS和NPM。

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

Mac下安裝NodeJS

如果你使用homebrew任務(wù)管理器，你可以直接在終端執(zhí)行下面的命令安裝NodeJS:

$ brew install node

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

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

git clone git://github.com/ry/node.gitcd node./configuremakesudo make install

Ubuntu下安裝NodeJS

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

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

接下來在命令終端執(zhí)行：

git clone git://github.com/ry/node.gitcd node./configuremakesudo make install

Windows下安裝NodeJS

在Windows下安裝NodeJS，需要使用cygwin。并按下面的步驟進(jìn)行安裝：

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

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

通過Start → Cygwin → Cygwin Bash Shell打開cygwin命令行，執(zhí)行下面的命令安裝NodeJS:

git clone git://github.com/ry/node.gitcd node./configuremakesudo make install

以上資源來自于How to Install Node.js一文，如果你覺得這樣安裝NodeJS可能比較繁瑣，可以直接進(jìn)入Nodejs官網(wǎng)中下載各系統(tǒng)所需要的安裝包進(jìn)行安裝。

擴展閱讀

• How to Install Node.js
• Installing and running node.js on Mac OS X
• Setting up Node.js and npm on Mac OSX
• Installing node.js, npm, and redis on Mac OS X

安裝NPM

裝好NodeJS后，可以在你的終端執(zhí)行下面的命令安裝NPM:

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

如果這樣安裝失敗，或許你要在上面的命令之前加上sudo，并按提示輸入你的用戶密碼。詳細(xì)的安裝請點擊這里查閱。

如果需要檢驗安裝NodeJS或NPM是否要成功，可以通過下面的命令來檢驗：

$ node -vv0.10.13$ npm -v1.3.2

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

安裝CLI

這里要介紹的Grunt是0.40版本，如果你的系統(tǒng)安裝了Grunt 0.3，或者想從Grunt 0.3升級而來，你需要先卸載：

$ npm uninstall -g grunt

為了方便使用Grunt，你應(yīng)該在全局范圍內(nèi)安裝Grunt的命令行接口(CLI)。要做到這一點，需要在命令行中執(zhí)行：

$ npm install -g grunt-cli

這條命令將會把grunt命令植入到你的系統(tǒng)路徑中，這樣就允許你從任意目錄中運行Grunt(定位到任意目錄運行g(shù)runt命令)。

注意：安裝grunt-cli并不等于安裝了Grunt任務(wù)運行器! Grunt CLI的工作很簡單：在Gruntfile所在目錄調(diào)用運行已安裝好的相應(yīng)版本的Grunt。這就意味著可以在同一臺機器上同時安裝多個版本的Grunt。

CLI如何工作

每次運行g(shù)runt時，它都會使用node的require()系統(tǒng)查找本地已安裝好的grunt。正因為如此，你可以從你項目的任意子目錄運行g(shù)runt。

如果找到本地已經(jīng)安裝好的Grunt，CLI就會加載這個本地安裝好的Grunt庫，然后應(yīng)用你項目中的Gruntfile中的配置(這個文件用于配置項目中使用的任務(wù)，Grunt也正是根據(jù)這個文件中的配置來處理相應(yīng)的任務(wù))，并執(zhí)行你所指定的所有任務(wù)。

想要真正的了解這里發(fā)生了什么，可以閱讀源碼。這份代碼很短。

安裝指定版本的Grunt

如果你要安裝指定版本的Grunt或者Grunt插件，只需要在命令行中運行：

$ npm install grunt@VERSION --save-dev

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

拿個簡單的Grunt項目來說，先在你本地創(chuàng)建一個本地項目，這里我將其命名為“installGrunt”。

$ mkdir installGrunt$ cd installGrunt

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

$ npm install grunt --save-dev

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

...npm http 304 https://registry.npmjs.org/underscore.stringnpm 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 --versiongrunt-cli v0.1.9grunt v0.4.1

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

從前面的教程中我們可以很清楚的知道，要正確運行Grunt項目，必須依賴于package.json和Gruntfile.js文件，因此我們緊接下來需要在項目的根目錄下創(chuàng)建這兩個文件：

$ touch package.json Gruntfile.js

依照前面的教程，我們將安裝的Grunt，添加到package.json中，成為其依賴關(guān)系：

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插件的方法和上面的是反過來的，先創(chuàng)建package.json文件中添加所需要的Grunt或Grunt插件，比如說現(xiàn)在需要在項目中添加一個Grunt的插件Sass，我們先在package.json文件中的devDependencies中添加相關(guān)的依賴關(guān)系：

{??? "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":"*"??? }}

創(chuàng)建好依賴關(guān)系后，在命令行中執(zhí)行：

$ npm install sass --save-dev

執(zhí)行命令后，可以看到相關(guān)提示信息：

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

這里僅安裝了一個Grunt插件，如果同時安裝多個Grunt插件時，一條一條這樣執(zhí)行似乎很是麻煩，其實還有一種更好的方式，先在package.json文件中添加需要的Grunt插件依賴關(guān)系：

{??? "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":"*"??? }}

添加完所需的依賴關(guān)系之后，可以在終端執(zhí)行：

$ npm install

就可以一次性安裝package.json文件中所聲明的依賴關(guān)系的grunt插件。同時會在你項目的根目錄下添加一個node_modules目錄，目錄中會放置對應(yīng)grunt插件所需的插件目錄名：

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

注意：當(dāng)你給npm install添加--save-dev標(biāo)志時，一個波浪線范圍將被用于你的package.json中。通常這么做是很好的，因為如果指定版本的Grunt或Grunt插件有更新補丁出現(xiàn)時，它將自動升級到開發(fā)中的版本，與semver對應(yīng)。

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

安裝已發(fā)布的開發(fā)版本的Grunt

通常當(dāng)新功能開發(fā)完成后，Grunt構(gòu)建都可能會定期被發(fā)布到npm中。沒有顯式指定的版本號，這些構(gòu)建不可能安裝到依賴中，通常它會有一個內(nèi)部版本號或者alpha/beta指定候選版本號。

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

注意：如果你沒有注意指定版本號，都會有一個波浪線的版本范圍將被指定到package.json中。這是非常糟糕的，因為指定開發(fā)版本的模塊都是新的，可能是不兼容的，如果開發(fā)發(fā)布的補丁通過npm被安裝到你的package.json中會有可能破壞你的構(gòu)建工作。

在這種情況下手動的編輯你的package.json是非常重要的，并且你應(yīng)該從package.json中的版本號中移除~(波浪線)。這樣就會鎖定你所指定的精確的開發(fā)版本(穩(wěn)定并安裝好的依賴模塊)。

這種方式同樣也可以用于安裝已發(fā)布的開發(fā)版本的Grunt插件。

通常發(fā)布的開發(fā)版都只是作為源代碼提交到指定的倉庫如Github等，可能并沒有作為npm模塊正式發(fā)布。在使用的過程中，建議按需添加穩(wěn)定版本的依賴模塊。如果你有足夠的信心，也可以嘗試使用最新的未正式發(fā)布的模塊來滿足工作需求。——@Toobug

從Github上直接安裝

如果你想安裝一個最新版本的，未正式發(fā)布的Grunt或者Grunt插件，按照說明你可以指定一個Git URL作為依賴，注意這里一定要指定一個實際提交的SHA(而不是一個分支名)作為commit-ish。這樣就會保證你的項目總是使用明確版本的Grunt。

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

本文主要介紹了如何在系統(tǒng)中安裝Grunt和Grunt插件。希望這篇文章對初學(xué)者有一定的幫助。

特別聲明：本教程中很多內(nèi)容摘自以下相關(guān)文章，在此特別感謝他們?yōu)槲覀兲峁┻@么優(yōu)秀的教程：

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

如需轉(zhuǎn)載，煩請注明出處：http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html

上一篇: 如何使用Sass和SMACSS維護(hù)CSS | 下一篇: 使用Grunt實現(xiàn)自動化工作流

From WizNote

Attachment List

?

轉(zhuǎn)載于:https://www.cnblogs.com/zDanica/p/5471631.html

總結(jié)

以上是生活随笔為你收集整理的Grunt教程——安装Grunt的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。