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