Grunt 学习笔记 The JavaScript Task Runner

GRUNT: The JavaScript Task Runner
JavaScript 任务执行器，类似于 Java 中的 Ant 和 Maven。
Grunt 的生态系统很大，包括很多的插件。

为什么需要 Task Runner

简而言之：自动化。
在执行一些重复性的工作时，例如代码压缩，编译，单元测试，代码质量检测等等，Task Runner 使得用户的操作更简单。
通过配置 Gruntfile 文件，Task Runner 可以自动执行相关的任务。

Grunt 的使用

Grunt 的安装

通过 Node 来安装 Grunt。
在 package.json 文件的 devDependencies 属性中配置 Grunt 及相应插件的版本。随后执行命令 npm install

package.json 文件

package.json 文件的规范参考 https://docs.npmjs.com/files/package.json

package.json 文件位于项目的根目录，与 Gruntfile.js 文件并列。
执行 npm install 命令来安装对应版本的 Grunt 及相应插件。

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"
  }
}

Gruntfile.js 文件

Gruntfile.js 文件包含4个部分：

• The "wrapper" function
  如下：

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

• Project and task configuration 任务的配置
• Loading Grunt plugins and tasks
• Custom tasks 自定义任务
  如下：

grunt.registerTask('unittest', [
    'clean:build',
    'mkdir:build',
    'copy:build',
    'karma:unit'
]);

一个完整的示例如下：

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']);

};

关于任务的创建，可以参考 Creating tasks

---

引用：
Grunt 官网