在本教程中，我们将学习在Web项目中使用Grunt JavaScript任务运行器。

什么是Grunt？

Grunt是一个任务运行器。
它有助于自动化任务，例如连接文件，最小化JavaScript和CSS文件等。

前提条件

NodeJS和NPM

为了在我们的项目中使用Grunt，我们将需要安装NodeJS和NPM。
NPM是一个Node Package Manager，我们将使用它来安装Grunt及其插件。

单击此处以阅读有关如何在Mac上安装NodeJS的教程。

一旦安装了Node和NPM，就可以通过在终端中执行以下命令来检查版本。

$node -v

这将给出节点版本。

$npm -v

这将给出npm版本。

全局安装Grunt

有了Node和NPM之后，就可以安装Grunt了。
执行以下命令以全局安装Grunt。

$npm install -g grunt-cli

注意！如果您没有权限，则可能需要使用sudo。

单击此处以阅读有关如何在Mac上安装Grunt的教程。

上面的命令将在全球范围内安装Grunt CLI，使grunt可以从任何目录运行。

安装Grunt CLI不会安装Grunt Task Runner。
" grunt-cli"仅用于运行项目中安装的Grunt。

现在，我们将讨论如何在项目中安装Grunt。

创建项目

让我们开始创建一个项目文件夹(例如grunt-project)。
在终端中使用以下命令创建新目录。

$mkdir grunt-project

-MacBook-Pro:~ $cd Documents/-dev/
-MacBook-Pro:-dev $mkdir grunt-project
-MacBook-Pro:-dev $cd grunt-project/
-MacBook-Pro:grunt-project $ls -la
total 0
drwxr-xr-x  2   staff   68 Mar 14 15:41 .
drwxr-xr-x  9   staff  306 Mar 14 15:41 ..
-MacBook-Pro:grunt-project $

创建package.json文件

现在，移入项目文件夹，然后在终端中执行以下命令以创建package.json文件。

$npm init

package.json是一个文件，用于存储项目的元数据，并且由npm使用。
我们将在文件中将grunt及其插件列为devDependencies。

-MacBook-Pro:grunt-project $npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (grunt-project) 
version: (1.0.0) 
description: This is a sample grunt project.
entry point: (index.js) 
test command: 
git repository: 
keywords: 

license: (ISC) 
About to write to /Users//Documents/-dev/grunt-project/package.json:

{
  "name": "grunt-project",
  "version": "1.0.0",
  "description": "This is a sample grunt project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) y
-MacBook-Pro:grunt-project $

注意！不要将package.json文件中的软件包命名为grunt，因为那样您将无法安装实际的grunt软件包。

创建Gruntfile.js

在项目文件夹中创建一个新文件，并将其另存为Gruntfile.js

我们使用Gruntfile.js文件定义任务并加载Grunt插件。

$touch Gruntfile.js

-MacBook-Pro:grunt-project $touch Gruntfile.js
-MacBook-Pro:grunt-project $ls -la
total 8
drwxr-xr-x  4   staff  136 Mar 14 16:15 .
drwxr-xr-x  9   staff  306 Mar 14 15:41 ..
-rw-r--r--  1   staff    0 Mar 14 16:15 Gruntfile.js
-rw-r--r--  1   staff  253 Mar 14 16:03 package.json

在项目中安装Grunt

使用以下命令在项目中安装grunt并将其作为devDependencies添加到package.json文件中。

$npm install grunt --save-dev

这会将grunt添加到项目中，并将更新package.json文件。

package.json文件

{
  "name": "grunt-project",
  "version": "1.0.0",
  "description": "This is a sample grunt project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}