使用GruntJS构建Web程序之Tasks（任务）篇

在 GruntJS 中，任务（Tasks）是指一组执行一些特定的工作的命令。GruntJS 提供了很多内置的任务，比如文件的复制、合并、压缩等等，同时也支持使用插件编写自定义任务。在本篇中，我们将深入学习 GruntJS 的任务相关知识。

任务的定义

下面是一个使用 GruntJS 定义任务的示例：

module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/built.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['concat']);
};

该示例定义了一个名为 concat 的任务。任务的具体定义在 grunt.initConfig 的参数中，这个参数接收一个对象，对象中的属性表示任务的名称，属性的值是包含任务具体配置的对象。对于这个示例，任务对象包含以下信息：

• options： 一个对象，描述了该任务的一些配置选项。
• dist：一个属性，定义了该任务的一个“子任务”，用来表示一个具体的场景，这个子任务中特定的配置选项被使用。

在 GruntJS 中，任务可以被划分成“子任务”，而每个子任务又可以继承其父级任务的属性。在这个示例中，concat 任务包含了许多 dist 子任务，每个 dist 子任务都继承了 options 属性的值。dist 子任务使用 src 和 dest 属性分别表示源文件和目标文件路径。

加载任务

定义了任务后，我们需要使用 grunt.loadNpmTasks 方法来加载它们。该方法需要传递一个参数来指定需要加载的任务插件的名称。

grunt.loadNpmTasks('grunt-contrib-concat');

这个示例以上面的 concat 任务为例，该方法的参数 grunt-contrib-concat 是一个插件的名称。它将告诉 GruntJS 去寻找并加载一个名为 grunt-contrib-concat 的插件。

在加载插件前需要确保已在项目中安装了相应的插件库。

注册任务

任务和其对应插件被加载后，可以通过 grunt.registerTask 方法定义一个或多个“别名”来启动这些任务。一个任务可以同时有多个别名。

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

在这个示例中，我们定义了一个默认任务，运行时 GruntJS 会自动寻找一个名为 default 的任务，并执行它。在这个示例中，执行 default 任务时会自动运行 concat 任务。

示例

以下是一个示例，使用 GruntJS 和 grunt-contrib-uglify 插件来压缩 JavaScript 文件。

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      build: {
        files: {
          'dist/built.min.js': ['src/**/*.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');

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

该示例定义了一个名为 uglify 的任务，使用 uglify 插件压缩所有 src 目录下的 JavaScript 文件并输出到 dist/built.min.js 中。

执行 grunt 命令将启动默认任务，即运行 uglify 压缩任务，生成一个 built.min.js 文件。当然，你可以通过 grunt uglify 直接启动 uglify 任务，只是出于熟悉习惯，我们更喜欢使用默认任务的方式。

除此之外，还有许多值得尝试的 GruntJS 任务，比如：grunt-contrib-copy 用来复制文件、grunt-contrib-jshint 进行 JavaScript 语法检查，以及 grunt-contrib-watch 可以用来监视文件的变化并实时运行指定任务。