Grunt新手上路

新手上路

Grunt 的安装与管理都是通过 npm，npm 是 Node.js 的包管理器。

Grunt 0.4.x 要求 Node.js 版本 >= 0.8.0。

安装 CLI

在全局环境中安装 Grunt 的命令行接口。

npm install -g grunt-cli

安装 grunt-cli 并不等于安装了 Grunt 任务运行器！Grunt CLI 的任务是运行 Gruntfile 指定的 Grunt 版本。 这样就可以在一台电脑上同时安装多个版本的 Grunt。

运行 Grunt 项目

1. 切换到项目根目录；
2. 运行 npm install 安装项目依赖库；
3. 运行 grunt。

新建 Grunt 项目

标准配置包含两个文件：

package.json：用于保存项目元数据。

Gruntfile：Gruntfile.js 或 Gruntfile.coffee，用于配置或定义任务、加载 Grunt 插件。

package.json

存放于项目根目录。运行 npm install 会安装指定版本的依赖库。

例子：

{
  "name": "gruntjs.cn",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

安装 Grunt 插件

运行 npm install <module> --save-dev，不仅会安装指定的 <module> 模块，还会自动添加到devDependencies 区域中，且包括 版本范围。

例如，安装最新版本的 Grunt：

npm install grunt --save-dev

Gruntfile

存放于项目根目录。

包含四个部分：

• 包装函数
• 任务配置
• 任务加载
• 自定义任务

Gruntfile 示例

// 包装函数
module.exports = function(grunt) {

  // 任务配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 任务加载
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 自定义任务
  grunt.registerTask('default', ['uglify']);

};

包装函数

Gruntfile 和 Grunt 插件都使用这种基本格式，所有 Grunt 代码都必须指定在这个函数里面：

module.exports = function(grunt) {
  // 处理 Grunt 相关事务
};

任务配置

Grunt 任务所依赖的配置数据定义在一个对象中，这个对象会被传递给 grunt.initConfig 方法。

grunt.file.readJSON('package.json') 会把保存在 package.json 中的 JSON 元数据导入到 Grunt 配置中。

插件任务的配置需要被指定在一个同名的属性中，比如 grunt-contrib-uglify 任务的配置如下：

// 任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

任务加载

一些任务，比如 合并、压缩 和 校验 等都可做为 Grunt 插件。只要插件被指定在 package.json 中，并且已经通过 npm install 安装好，就可以在 Gruntfile 中加载：

// 加载提供 "uglify" 任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');

自定义任务

可以定义 default 任务来让 Grunt 默认运行一个或者多个任务。在下面的例子中，运行 grunt 将执行uglify 任务。可以在任务数组中指定任意数量的任务。

// 默认任务
grunt.registerTask('default', ['uglify']);

也可以在 Gruntfile 中定义自定义任务：

module.exports = function(grunt) {

  // 自定义任务
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

自定义任务不一定要在 Gruntfile 中，也可以在外部 .js 文件，通过 grunt.loadTasks 方法加载。