Grunt 入门教程三：GruntFile 例子

本例中使用了如下几个插件：

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

整个GruntFile文件内容在本文的结尾，但是您最好能按顺序阅读本教程，我们会一步一步的讲解。

第一步是准备一个包装函数（wrapper function），用来包装 Grunt 配置：

module.exports = function(grunt) {
}

在这个函数里面我们可以初始化配置对象：

grunt.initConfig({
});

下面，我们从文件 package.json 文件中读取项目的配置，并存储到 pkg 属性中。这样我们可以通过 pkg 属性来引用 package.json 文件中的配置。

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

上面三步完成后，我们会得到下面这段代码：

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

下面就可以逐个配置我们需要的任务了。每个任务的配置都是config对象的一个与任务名同名的属性。所以，concat 任务的配置就是config下一个的concat属性中。下面是我的concat任务的配置：

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

注意我是如何引用json文件中的name属性的。因为之前我们把 package.json 中的配置读取到 pkg 属性中，所以我们可以通过 pkg.name 来引用相应的配置。Grunt 有一个很简单的模板引擎来输出这些配置。这里我让concat任务把 src 目录下的所有以 .js 结尾的文件连接起来，然后把连接后的内容保存到 dist 目录下。

下面让我们配置uglify插件来压缩js文件：

uglify: {
  options: {
    // the banner is inserted at the top of the output
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}

这个任务的作用是把上面concat任务链接生成的文件压缩。注意我们通过 <%= concat.dist.dest =%>来引用在concat任务中的配置。

QUnit插件的配置是最简单的。你只需要指定那些用来执行单元测试的html文件就可以了。

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

JSHint 插件的配置也很简单：

jshint: {
  // define the files to lint
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  // configure JSHint (documented at http://www.jshint.com/docs/)
  options: {
      // more options here if you want to override JSHint defaults
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}

JSHint插件只需要一组文件和一个配置对象就行了。关于jshint配置的详细文档在这里 http://www.jshint.com/docs/。如果默认配置就能满足你的要求，就没必要重新定义了。

最后，我们配置 watch 插件：

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

这个任务可以通过 grunt watch 来执行。watch 任务会监视指定文件，一旦任何文件出现改动就会执行指定的任务（这里会执行 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');

最后，部署下任务，最重要的是 default 任务：

// this would be run by typing "grunt test" on the command line
grunt.registerTask('test', ['jshint', 'qunit']);

// the default task can be run just by typing "grunt" on the command line
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']);
};