Gruntfile 范例

Gruntfile 范例

以下是一个 Gruntfile 范例，此范例使用了5个 Grunt 插件：

• grunt-contrib-uglify
• grunt-contrib-qunit
• grunt-contrib-concat
• grunt-contrib-jshint
• grunt-contrib-watch

在页面的底部可以查看完整的 Gruntfile，下面将一步一步地讲解它。

首先是用于封装 Grunt 配置的包装函数。

module.exports = function(grunt) {
}

在这个函数里面初始化任务配置对象：

grunt.initConfig({
});

接着从 package.json 文件读取项目配置并存入 pkg 属性中。这样就可以引用 package.json 文件中的属性值。

pkg: grunt.file.readJSON('package.json')

到目前为止就有如下配置：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
};

现在就可以为的每个任务定义相应的配置。任务的配置对象以属性的形式存在于 Grunt 的配置对象中，并且属性名与任务名相同。比如 "concat" 任务对应配置对象中的 "concat" 属性。

concat: {
  options: {
    // 定义分割合并文件的字符
    separator: ';'
  },
  dist: {
    // 待拼接的文件
    src: ['src/**/*.js'],
    // 生成的文件位置
    dest: 'dist/<%= pkg.name %>.js'
  }
}

使用 pkg.name 来访问 pkg 属性中的 package.json 文件信息，它被解析为一个 JavaScript 对象。Grunt 自带的模板引擎可以输出配置对象的属性值。上面的例子中，concat 任务会将 src/ 目录下所有以 .js 结尾的文件拼接起来。

下面是 uglify 插件的配置，用于压缩 JavaScript 文件：

uglify: {
  options: {
    // 生成注释并插入到输出文件的顶部
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}

uglify 任务会在 dist/ 目录中创建一个包含压缩结果的 JavaScript 文件。这里使用了<%= concat.dist.dest>，所以 uglify 会压缩 concat 任务中生成的文件。

QUnit 插件的设置非常简单。只需要提供用于测试运行的文件的位置，QUnit 运行在 HTML 文件上。

qunit: {
  files: ['test/**/*.html']
},

JSHint 插件的配置：

jshint: {
  // 定义待检测的文件
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  // 配置 JSHint (文档：http://www.jshint.com/docs/)
  options: {
      // 可以在这里重写 JSHint 的默认配置选项
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}

JSHint 只需要一个文件数组和一个 options 对象。可以到 JSHint 官网文档 查看更多。

watch 插件的配置：

watch: {
  files: ['<%= jshint.files %>'],
  tasks: ['jshint', 'qunit']
}

在命令行使用 grunt watch 来运行这个任务。当它检测到任何指定的文件发生变化时 (在这里使用了与 JSHint 任务相同的文件)，就会依次执行指定的任务 (在这里定义了 jshint 和 qunit 任务)。

最后, 还要加载所需要的 Grunt 插件。 确保已经通过 npm 安装好。

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

建立任务，最重要的是 default 任务：

// 在命令行执行 "grunt test" 会运行 test 任务
grunt.registerTask('test', ['jshint', 'qunit']);

// 在命令行执行 "grunt" 会运行 default 任务
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

下面是完整的 Gruntfile.js：

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

};