JavaScript任务管理工具Grunt的基本配置与使用

作为JavaScript下最流行的任务管理工具之一 ，Grunt可以方便快速地让很多重复工作自动化，在熟练使用的情况下可以极大地提高工作效率。配合大量官方与第三方（目前有超过6000个）插件，Grunt具备完善的生态系统，这让其功能愈发强大，对于开发人员来说，很有必要对其有所了解。

1.Grunt安装

grunt可以通过npm安装，安装前可以考虑更新npm到最新版本。和大多数工具一样，Grunt也提供了其命令行工具grunt-cli，通过如下命令进行安装。

npm update -g npm
npm install -g grunt-cli
grunt --help #帮助

作为JavaScript的命令运行工具，grunt同样使用了nodejs的require()方式。对于grunt任务来说，除了node项目根目录下的package.json文件外，还需要配置Gruntfile.js文件，这是grunt运行所必须的两个基础配置文件。

在项目中运行grunt项目时，还需要通过npm安装项目所需的grunt插件。在grunt的插件中，名称中包含contrib的插件，都是有grunt官方编写并维护的，例如：

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

2.Gruntfile配置文件

2.1 典型的Gruntfile示例

一个简单的Gruntfile.js配置文件结构大致如下（官方文档示例），

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'
      }
    }
  });
  // 加载插件来执行uglify任务
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务(s).
  grunt.registerTask('default', ['uglify']);
};

可以看出，Gruntfile实际上是一个标准的JavaScript文件，包装（wrapper）并导出了供grunt运行的函数。歌不忍

2.2 Gruntfile 文件结构

Gruntfile文件通过grunt.initConfig方法来进行配置。一般来说，配置项的名称多是其任务名称，也可以包含必要的配置数据。在前节中，pkg:grunt.file.readJSON('package.json')配置项用来读取npm项目的package.json配置文件。官方文档中的配置文档参考如下。

grunt.initConfig({
  concat: {
    options: {
      // 任务级别的配置参数，可以覆盖项目级别的配置
    },
    // concat 任务和配置
  },
  uglify: {
    // uglify 任务和配置
  },
  // 其他非任务性的配置项和数据
  my_property: 'whatever',
  my_src_files: ['foo/*.js', 'bar/*.js'],
});

• 配置项中，options对象用于配置每个任务的具体参数，如果这些参数和全局配置冲突，会覆盖掉全局配置。在实际使用中options参数非常有用。
• 由于大多数任务都涉及到文件和文件夹操作，grunt配置项中一般通过src和dest来配置文件路径，配置项支持通配符和数组，也可以通过filter配置项对文件进行过滤。部分通配符说明如下：
  • *可以匹配/之外的任意数量的字母
  • **可以配置包含/在内的任意数量的字符
  • ?可以匹配/之外的单一字符
  • | 放在匹配模式最前面可以实现反向匹配
  • {}以逗号隔开，实现“或”条件匹配
  • 前节实例中src/<%=pkg.name%>.js 实现从外部文件（package.json中name项）导入文件的功能

3. 真实项目中的Gruntfile配置文件

3.1 Gruntfile的编写步骤

在配置Gruntfile编写中，首先包括一个包装器（wrapper）来讲整个模块导出为grunt函数。

module.exports = function(grunt) {
};

在包装器中，首先要进行任务配置。一般来说，配置项的第一项为pkg，用于读取项目的package.json文件。

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json')
});

pkg配置项之后，可依次编写各个任务，例如：

concat: {
  options: {
    // define a string to put between each file in the concatenated output
    separator: ';'
  },
  dist: {
    // the files to concatenate
    src: ['src/**/*.js'],
    // the location of the resulting JS file
    dest: 'dist/<%= pkg.name %>.js'
  }
}

任务编写完成后，需要调用grunt插件来执行各个任务。例如：

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

最后，注册任务以便grunt执行，最重要的是default任务，这是grunt的默认任务。

//在终端执行grunt test可以执行test任务
grunt.registerTask('test', ['jshint', 'qunit']);
// 在终端执行grunt，执行默认任务
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

3.2 官方文档的Gruntfile模板

按照上述步骤实现的官方文档提供的Gruntfile模板文件如下，该文件执行concat,uglify,qunit,jshint与watch任务。

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('test', ['jshint', 'qunit']);
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};

4.创建Grunt任务

4.1 任务别名

grunt任务中包含可选的描述项，在任务很多时可以区分各个不同的任务。任务列表用标准的javascript数组格式列出，如果不指定任务名称，则默认执行default任务。在执行任务时，每个人物可以包含指定的参数，以下示例中，第一行标识了可选的描述项位置，第二行列出了执行的任务清单，第三行执行两个包含参数的任务。本文中所有示例均来自grunt官方文档。

grunt.registerTask(taskName, [description, ] taskList)
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

4.2 多任务

grunt支持针对多个任务分别配置不同参数并执行，示例如下：

grunt.initConfig({
  log: {
    foo: [1, 2, 3],
    bar: 'hello world',
    baz: false
  }
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
  grunt.log.writeln(this.target + ': ' + this.data);
});

4.3 自定义任务

如果需要，也可以自定义不同的任务并执行。以下示例任务中bar依赖foo才能执行。

grunt.registerTask('foo', 'My "foo" task.', function() {
  return false;
});
grunt.registerTask('bar', 'My "bar" task.', function() {
  // Fail task if "foo" task failed or never ran.
  grunt.task.requires('foo');
  // This code executes if the "foo" task ran successfully.
  grunt.log.writeln('Hello, world.');
});
// Usage:
// grunt foo bar
//   doesn't log, because foo failed.
//   ***Note: This is an example of space-separated sequential commands,
//   (similar to executing two lines of code: `grunt foo` then `grunt bar`)
// grunt bar
//   doesn't log, because foo never ran.

4.4 异步任务

grunt任务默认同步执行，如果要执行异步任务，可参考如下示例。

grunt.registerTask('asyncme', 'My asynchronous task.', function() {
  var done = this.async();
  doSomethingAsync(done);
});

5. 创建grunt插件的步骤

如果要创建自己的grunt插件，可按官方指导的如下步骤 进行。

• 全局安装grunt-init,npm install -g grunt-init
• 安装gruntplugin模板项目，git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin，在windows系统中问及路径为%USERPROFILE%\.grunt-init\gruntplugin
• 在空目录下运行grunt-init gruntplugin
• 在项目中运行npm install
• 编写插件
• 执行npm publish以便将插件发布到npm。

参考资料

Grunt官网