星期一, 2022-06-13 12:46 — adminshiping1

入门

Grunt 和 Grunt 插件通过Node.js包管理器npm安装和管理。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）运行命令 shell 来执行此操作。

npm install -g grunt-cli

这会将grunt命令放在您的系统路径中，允许从任何目录运行它。

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

CLI 的工作原理

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

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

使用现有的 Grunt 项目

假设 Grunt CLI 已经安装并且项目已经配置了 apackage.json和 a Gruntfile，那么开始使用 Grunt 就很容易了：

切换到项目的根目录。
使用npm install.
运行 Grunt grunt。

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

准备一个新的 Grunt 项目

典型的设置将涉及向您的项目添加两个文件：package.json和Gruntfile.

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

Gruntfile：此文件名为Gruntfile.jsor Gruntfile.coffee，用于配置或定义任务和加载 Grunt 插件。当本文档提到 aGruntfile时，它正在谈论一个文件，它是 aGruntfile.js或 aGruntfile.coffee。

包.json

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

有几种方法可以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 和其他节点模块也可以这样做。如以下安装 JSHint 任务模块的示例所示：

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

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

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

Gruntfile

Gruntfile.jsor文件是一个有效的Gruntfile.coffeeJavaScript 或 CoffeeScript 文件，它位于项目的根目录中，位于package.json文件旁边，应该与项目源一起提交。

AGruntfile由以下部分组成：

“包装”功能
项目和任务配置
加载 Grunt 插件和任务
自定义任务

一个示例 Gruntfile

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

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 配置grunt.file.readJSON('package.json')中的 JSON 元数据导入。package.json因为<% %>模板字符串可以引用任何配置属性，所以可以通过这种方式指定文件路径和文件列表等配置数据以减少重复。

您可以在配置对象中存储任意数据，只要它不与您的任务所需的属性冲突，否则它将被忽略。此外，因为这是 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 插件和任务

许多常用的任务，如连接、缩小和linting都可以作为grunt 插件使用。只要一个插件被指定为依赖项，并且已经通过安装，它就可以在你的内部使用一个简单的命令来启用：package.jsonnpm installGruntfile

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

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

自定义任务

您可以通过定义任务将 Grunt 配置为默认运行一个或多个default任务。在以下示例中，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方法加载。

You are here

grunt 入门

入门