Grunt - 入门指南

---

---

要使用 Grunt，您需要安装 Node.js。Node.js 的安装已在上一章中进行了说明。您可以使用 Node.js 包管理器安装 Grunt 和 Grunt 插件。

在系统上设置 Grunt 之前，您可以使用以下命令更新 Node 包管理器：

npm update -g npm

如果您使用的是 Mac 或 Linux，则需要在命令行开头使用sudo 命令来授予管理员访问权限，如下所示：

sudo npm update -g npm

CLI 安装

CLI 代表命令行界面，它运行已安装的 Grunt 版本。要开始使用 Grunt，您需要全局安装 Grunt 的命令行界面 (CLI)，如下所示：

npm install -g grunt-cli

运行上述命令会将 grunt 命令放入您的系统路径中，这使得它可以从任何目录运行。您无法通过安装grunt-cli来安装 Grunt 任务运行器。它允许一台机器同时安装多个版本的 Grunt。

CLI 的工作原理

每当运行 Grunt 时，CLI 使用require() 系统在您的系统上查找已安装的 Grunt。使用grunt-cli，您可以从项目中的任何目录运行 Grunt。如果您使用的是本地安装的 Grunt，则 grunt-cli 使用本地安装的 Grunt 库并应用 Grunt 文件中的配置。

处理现有和新项目

如果您正在处理包含package.json和Gruntfile的已配置项目，请按照以下说明进行操作：

• 找到项目根目录的路径。
• 您可以使用npm install命令安装依赖项。
• 使用grunt命令运行 Grunt。

如果您正在创建新项目，请将package.json和Gruntfile这两个文件包含到您的项目中。

• package.json - package.json 文件放置在项目的根目录中，用于在您在同一文件夹中运行npm install命令时运行每个列出的依赖项。

• Gruntfile.js - Gruntfile.js 文件用于编写项目的配置设置。

package.json

package.json文件放置在项目的根目录中，位于Gruntfile旁边，用于在您在同一文件夹中运行npm install命令时运行每个列出的依赖项。

您可以通过以下列出的不同方式创建package.json：

• 您可以使用grunt-init创建 package.json 文件。
• 您也可以使用npm-init命令创建 package.json 文件。

您可以编写如下所示的规范：

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

您可以使用以下命令将 Grunt 和 grunt 插件添加到现有的 pacakge.json 文件中：

npm install <module> --save-dev

这里，<module> 表示要本地安装的模块。上述命令将安装指定的模块并将其自动添加到devDependencies部分。

例如，以下命令将安装最新版本的Grunt并将其添加到您的devDependencies中：

npm install grunt --save-dev

Gruntfile

Gruntfile.js文件是您将为 Grunt 配置设置的默认位置。Grunt 文件包含以下部分：

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

基本的Gruntfile.js文件如下所示：

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

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

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

包装器函数

在上面的代码中，module.exports是一个包装器函数，整个配置都位于此函数内部。这是一种将配置显示给应用程序其余部分的方式。

module.exports = function(grunt) {
   //do grunt-related things here
}

项目和任务配置

一旦您的 Grunt 配置准备就绪，您就可以配置 Grunt 任务。项目配置可以写在grunt.initConfig()部分。在grunt.initConfig()函数内部，从 package.json 文件获取配置信息并将其保存到pkg中。您可以使用pkg.name调用项目名称，并使用pkg.version调用版本。

加载 Grunt 插件和任务

使用grunt.loadNpmTasks方法从指定的插件加载任务。您可以使用npm本地安装插件，并且它必须相对于 Gruntfile。您可以使用以下简单的命令加载插件：

grunt.task.loadNpmTasks(pluginName)

自定义任务

当您通过命令行运行 Grunt 时，Grunt 将查找default任务。在上面的代码中，我们使用了一个名为uglify的任务，可以使用grunt命令运行。这与显式运行grunt uglify命令相同，您可以在数组中指定多个任务。

grunt.registerTask('default', ['uglify']);