转载

grunt入门讲解3：实例讲解使用 Gruntfile 配置任务

这个Gruntfile 实例使用到了5个 Grunt 插件：

grunt-contrib-uglify

grunt-contrib-qunit

grunt-contrib-concat

grunt-contrib-jshint

grunt-contrib-watch

上面的uglify，concat，watch这三个插件用的最多，第一个插件是用来压缩文件的，第二个插件是用来合并文件的，第三个插件用来监听文件内容的，如果文件内容改变了，就会触发回调方法进行相应的处理。

我们一步一步来讲解这个 Gruntfile 实例。

首先是 "wrapper" 函数，它包含了整个Grunt配置信息。

module.exports = function(grunt) { }

在这个函数中，我们可以初始化 configuration 对象：

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"任务的配置对象。

concat: {

options: {

// 定义一个用于插入合并输出文件之间的字符

separator: ';'

dist: {

// 将要被合并的文件

src: ['src/**/*.js'],

// 合并后的JS文件的存放位置

dest: 'dist/<%= pkg.name %>.js'

}

这里使用了 pkg.name 来访问我们刚才引入并存储在 pkg 属性中的 package.json 文件信息，它会被解析为一个JavaScript对象。Grunt自带的有一个简单的模板引擎用于输出配置对象(这里是指 package.json 中的配置对象)，这里我让 concat 任务将所有存在于 src/ 目录下以 .js 结尾的文件合并起来，然后存储在 dist 目录中，并以项目名来命名。

现在我们来配置uglify插件，它的作用是压缩JavaScript文件：

uglify: {

options: {

// 此处定义的banner注释将插入到输出文件的顶部

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: {   // 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只需要一个文件数组(也就是你需要检测的文件数组)，然后是一个options对象(这个对象用于重写JSHint提供的默认检测规则)。你可以到JSHint官方文档站点中查看完整的文档。如果你乐于使用JSHint提供的默认配置，那么在Gruntfile中就不需要重新定义它们了。

然后，我们来看看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');

最后设置了一些task。最重要的是default任务：

// 在命令行上输入"grunt test"，test task就会被执行。 grunt.registerTask('test', ['jshint', 'qunit']);  // 只需在命令行上输入"grunt"，就会执行default task 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: {         //这里是覆盖JSHint默认配置的选项         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']);  };