Grunt教程——安装Grunt
在上一节《Grunt教程——初涉Grunt》一文中介绍了Grunt是什么,今天我们主要一起来学习和探讨Grunt如何安装。俗话说,巧妇难为无米之炊,要想正常的使用Grunt,首要条件你要在自己的电脑环境中具备运行Grunt的环境。别的先不说了,我们切入正题。
概览
Grunt和Grunt插件应该作为项目依赖定义在你项目的package.json中。这样就允许你使用一个单独的命令:npm install
安装你项目中的所有依赖(在package.json
中定义好的Grunt和Grunt插件在使用npm install
时会自动安装相关依赖,正如我们已经了解到的,这些依赖定义在package.json
中了)。当前稳定的和开发中的Grunt版本始终都列在wiki页面上。
安装NodeJS
通过前面有关于Grunt译文 的相关介绍,我们都知道,Grunt运行离不开NodeJS和NPM。因此要使用Grunt首要的条件,你的系统需要安装NodeJS和NPM。
接下来,简单的了解一下NodeJS的安装。
Mac下安装NodeJS
如果你使用homebrew任务管理器,你可以直接在终端执行下面的命令安装NodeJS:
$ brew install node
或者采用下面的步骤安装NodeJS:
git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install
Ubuntu下安装NodeJS
首先你要安装一些依赖项:
sudo apt-get
install g++ libssl-dev apache2-utils
sudo apt-
get install git-core
接下来在命令终端执行:
git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install
Windows下安装NodeJS
在Windows下安装NodeJS,需要使用cygwin。并按下面的步骤进行安装:
安装cygwin,接下来在cygwin项目中使用setup.exe
安装下面的包:
- 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官网中下载各系统所需要的安装包进行安装。
扩展阅读
- 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后,可以在你的终端执行下面的命令安装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如何安装。俗话说,巧妇难为无米之炊,要想正常的使用Grunt,首要条件你要在自己的电脑环境中具备运行Grunt的环境。别的先不说了,我们切入正题。
概览
Grunt和Grunt插件应该作为项目依赖定义在你项目的package.json中。这样就允许你使用一个单独的命令:npm install
安装你项目中的所有依赖(在package.json
中定义好的Grunt和Grunt插件在使用npm install
时会自动安装相关依赖,正如我们已经了解到的,这些依赖定义在package.json
中了)。当前稳定的和开发中的Grunt版本始终都列在wiki页面上。
安装NodeJS
通过前面有关于Grunt译文 的相关介绍,我们都知道,Grunt运行离不开NodeJS和NPM。因此要使用Grunt首要的条件,你的系统需要安装NodeJS和NPM。
接下来,简单的了解一下NodeJS的安装。
Mac下安装NodeJS
如果你使用homebrew任务管理器,你可以直接在终端执行下面的命令安装NodeJS:
$ brew install node
或者采用下面的步骤安装NodeJS:
git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install
Ubuntu下安装NodeJS
首先你要安装一些依赖项:
sudo apt-get
install g++ libssl-dev apache2-utils
sudo apt-
get install git-core
接下来在命令终端执行:
git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install
Windows下安装NodeJS
在Windows下安装NodeJS,需要使用cygwin。并按下面的步骤进行安装:
安装cygwin,接下来在cygwin项目中使用setup.exe
安装下面的包:
- 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官网中下载各系统所需要的安装包进行安装。
扩展阅读
- 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后,可以在你的终端执行下面的命令安装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