Gruntfile示例

    你可以在这个页面的底部查看完整的Gruntfile文件，但是如果你保持从上至下按序阅读， 我们将一步一步的来讨论它。

    首先是用于封装你的Grunt配置的wrapper函数(包装函数)部分：

    在这个函数里面我们以初始化我们的配置(任务配置)对象：

    1. grunt.initConfig({
    2. });

    接下来我们可以从package.json文件中读取我们的项目配置并存储到pkg属性中。这就允许我们引用存储在package.json文件中的属性值(通过读取package.json中配置并存储在一个名为pkg的属性中，这样我们就可以在定义在grunt.initConfig中的配置对象中使用快捷方式pkg来引用package.json文件中的项目配置属性)，正如我们很快就可以看到：

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

    到目前为止我们就可以看到如下配置：

    1. module.exports = function(grunt){
    2.     grunt.initConfig({
    3.         pkg: grunt.file.readJSON('package.json')
    4.     });
    5. }

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

    接下来，让我们来看看uglify插件配置，它用于压缩我们的JavaScript文件：

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

    这里我们让uglify在目录中创建了一个包含压缩结果的JavaScript文件。注意这里我使用了<%= concat.dist.dest>，因此uglify会压缩concat任务中生成的文件。

    QUnit插件的设置非常简单。你只需要给它提供用于测试运行的文件的位置，注意这里的QUnit是运行在HTML文件上的。

    1. qunit: {
    2.     files: ['test/**/*.html']
    3. }

    JSHint插件的配置也很简单：

    1. jshint: {
    2.     //定义用于检测的文件
    3.     files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
    4.     //配置JSHint (参考文档:http://www.jshint.com/docs)
    5.     options: {
    6.         //你可以在这里重写jshint的默认配置选项
    7.             jQuery: true,
    8.             console: true,
    9.             module: true
    10.         }
    11.     }
    12. }

    最后我们还有一个watch插件:

    你可以在命令行使用grunt watch来运行这个任务。当它检测到任何你所指定的文件(在这里我使用了JSHint任务中需要检测的相同的文件)发生变化时，它就会按照你所指定的顺序执行指定的任务(在这里我指定了jshint和qunit任务)。

    最后, 我们还要加载所需要的Grunt插件。 它们应该已经全部通过npm安装好了。

    1. grunt.loadNpmTasks('grunt-contrib-uglify');
    2. grunt.loadNpmTasks('grunt-contrib-jshint');
    3. grunt.loadNpmTasks('grunt-contrib-qunit');
    4. grunt.loadNpmTasks('grunt-contrib-watch');
    5. grunt.loadNpmTasks('grunt-contrib-concat');

    那么最后我们还要建立一些任务，最重要的是default任务：

    1. //下面这个在命令行可以通过`grunt test`来运行执行jshint和qunit任务
    2. grunt.registerTask('test', ['jshint', 'qunit']);
    4. //下面这个可以在命令行中通过'grunt'来运行默认指定的4个任务
    5. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
    1. module.exports = function(grunt){
    2.     grunt.initConfig({
    3.         pkg: grunt.file.readJSON('package.json'),
    4.         concat: {
    5.             options: {
    6.                 separator: ';'
    7.             },
    8.             dist: {
    9.                 src: ['src/**/*.js'],
    11.             }
    12.         },
    13.         uglify: {
    14.             options: {
    15.                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
    16.             },
    17.             dist: {
    18.                     'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    19.                 }
    20.             }
    21.         },
    22.         qunit: {
    23.             files: ['test/**/*.html']
    24.         },
    25.         jshint: {
    26.             files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
    27.             options: {
    28.                 //这里是覆盖JSHint默认配置的选项
    29.                 globals: {
    30.                     jQuery: true,
    31.                     console: true,
    32.                     module: true,
    33.                     document: true
    34.                 }
    35.             }
    36.         },
    37.         watch: {
    38.             files: ['<%= jshint.files %>'],
    39.             tasks: ['jshint', 'qunit']
    40.         }
    41.     });
    43.     grunt.loadNpmTasks('grunt-contrib-uglify');
    44.     grunt.loadNpmTasks('grunt-contrib-jshint');
    45.     grunt.loadNpmTasks('grunt-contrib-qunit');
    46.     grunt.loadNpmTasks('grunt-contrib-watch');
    47.     grunt.loadNpmTasks('grunt-contrib-concat');
    49.     grunt.registerTask('test', ['jshint', 'qunit']);
    50.     grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);