入门

Grunt 和 Grunt 插件通过 npm（Node.js 包管理器）安装和管理。Grunt 0.4.x 需要稳定的 Node.js 版本 >= 0.8.0。

在设置 Grunt 之前，请确保您的 npm 是最新的，方法是运行 npm update -g npm（在某些系统上可能需要 sudo）。

如果您已经安装了 Grunt，现在正在寻找一些快速参考，请查看我们的 Gruntfile 示例以及如何配置任务。

安装 CLI

使用 Grunt 0.3？请参阅 Grunt 0.3 说明

为了开始使用，您需要全局安装 Grunt 的命令行界面 (CLI)。您可能需要使用 sudo（对于 OSX、*nix、BSD 等）或以管理员身份运行命令行外壳（对于 Windows）才能执行此操作。

npm install -g grunt-cli

这将把 grunt 命令添加到您的系统路径中，允许从任何目录运行它。

请注意，安装 grunt-cli 不会安装 Grunt 任务运行器！Grunt CLI 的工作很简单：运行安装在 Gruntfile 旁边的 Grunt 版本。这允许在同一台机器上同时安装多个版本的 Grunt。

CLI 的工作原理

每次运行 grunt 时，它都会使用 node 的 require() 系统查找本地安装的 Grunt。因此，您可以从项目的任何子文件夹中运行 grunt。

如果找到了本地安装的 Grunt，CLI 会加载 Grunt 库的本地安装，应用 Gruntfile 中的配置，并执行您请求它运行的任何任务。要真正了解发生了什么，请阅读代码。

使用现有的 Grunt 项目

假设已经安装了 Grunt CLI，并且项目已经使用 package.json 和 Gruntfile 配置，那么开始使用 Grunt 非常容易

切换到项目的根目录。
使用 npm install 安装项目依赖项。
使用 grunt 运行 Grunt。

就是这样。可以通过运行 grunt --help 列出已安装的 Grunt 任务，但通常最好从项目的文档开始。

准备新的 Grunt 项目

典型的设置包括向项目添加两个文件：package.json 和 Gruntfile。

package.json：此文件由 npm 用于存储作为 npm 模块发布的项目的元数据。您将在该文件中将 grunt 和您的项目需要的 Grunt 插件列为 devDependencies。

Gruntfile：此文件名为 Gruntfile.js 或 Gruntfile.coffee，用于配置或定义任务并加载 Grunt 插件。当本文档提到 Gruntfile 时，它指的是一个文件，可以是 Gruntfile.js 或 Gruntfile.coffee。

package.json

package.json 文件位于项目的根目录中，与 Gruntfile 相邻，并且应该与项目源代码一起提交。在与 package.json 文件相同的文件夹中运行 npm install 将安装其中列出的每个依赖项的正确版本。

有几种方法可以为您的项目创建 package.json 文件

大多数 grunt-init 模板会自动创建特定于项目的 package.json 文件。
npm init 命令将创建一个基本的 package.json 文件。
从下面的示例开始，并根据需要进行扩展，遵循此规范。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

安装 Grunt 和 gruntplugins

将 Grunt 和 gruntplugins 添加到现有 package.json 的最简单方法是使用命令 npm install <module> --save-dev。这不仅会在本地安装 <module>，还会使用波浪号版本范围自动将其添加到 devDependencies 部分。

例如，这将在您的项目文件夹中安装最新版本的 Grunt，并将其添加到您的 devDependencies 中

npm install grunt --save-dev

对于 gruntplugins 和其他 node 模块，也可以这样做。如下面的示例所示，安装 JSHint 任务模块

npm install grunt-contrib-jshint --save-dev

在插件页面查看当前可用的 gruntplugins，以便在您的项目中安装和使用。

完成后，请确保将更新后的 package.json 文件与您的项目一起提交！

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是一个有效的 JavaScript 或 CoffeeScript 文件，它位于项目的根目录中，与 package.json 文件相邻，并且应该与项目源代码一起提交。

Gruntfile 由以下部分组成

“包装器”函数
项目和任务配置
加载 Grunt 插件和任务
自定义任务

Gruntfile 示例

在下面的 Gruntfile 中，项目元数据从项目的 package.json 文件导入到 Grunt 配置中，并且 grunt-contrib-uglify 插件的 uglify 任务被配置为压缩源文件并使用该元数据动态生成横幅注释。当在命令行上运行 grunt 时，默认情况下将运行 uglify 任务。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

现在您已经看到了整个 Gruntfile，让我们看看它的组成部分。

“包装器”函数

每个 Gruntfile（和 gruntplugin）都使用这种基本格式，并且您所有的 Grunt 代码都必须在此函数内指定

module.exports = function(grunt) {
  // Do grunt-related things in here
};

项目和任务配置

大多数 Grunt 任务依赖于传递给 grunt.initConfig 方法的对象中定义的配置数据。

在此示例中，grunt.file.readJSON('package.json') 将存储在 package.json 中的 JSON 元数据导入到 grunt 配置中。因为 <% %> 模板字符串可以引用任何配置属性，所以可以这样指定文件路径和文件列表等配置数据，以减少重复。

您可以在配置对象中存储任何任意数据，只要它不与您的任务所需的属性冲突，否则将被忽略。此外，因为这是 JavaScript，所以您不仅限于 JSON；您可以在这里使用任何有效的 JS。如果需要，您甚至可以以编程方式生成配置。

与大多数任务一样，grunt-contrib-uglify 插件的 uglify 任务希望在其同名属性中指定其配置。在这里，指定了 banner 选项，以及一个名为 build 的 uglify 目标，该目标将单个源文件压缩到单个目标文件。

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

加载 Grunt 插件和任务

许多常用的任务，如连接、压缩和代码检查，都可以作为 grunt 插件使用。只要插件在 package.json 中指定为依赖项，并且已经通过 npm install 安装，就可以在您的 Gruntfile 中使用一个简单的命令启用它

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

注意： grunt --help 命令将列出所有可用任务。

自定义任务

您可以通过定义 default 任务来配置 Grunt 以默认运行一个或多个任务。在以下示例中，在命令行上运行 grunt 而不指定任务将运行 uglify 任务。这在功能上等同于显式运行 grunt uglify 甚至 grunt default。数组中可以指定任意数量的任务（带或不带参数）。

// Default task(s).
grunt.registerTask('default', ['uglify']);

如果您的项目需要 Grunt 插件未提供的任务，您可以在 Gruntfile 中定义自定义任务。例如，此 Gruntfile 定义了一个完全自定义的 default 任务，它甚至不使用任务配置

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

特定于项目的自定义任务不需要在 Gruntfile 中定义；它们可以在外部 .js 文件中定义，并通过 grunt.loadTasks 方法加载。

入门