本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章，第2.3节，作者：【美】Tim Ambler , Nicholas Cloud著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.3　将Grunt添加到项目中

在本章前面，为了添加Grunt命令行工具，我们将npm包grunt-cli作为全局模块进行了安装。现在我们应该已经可以在命令行中使用Grunt命令，但是对于每个要使用Grunt的工程，仍然需要为其配置Grunt本地依赖。为此，只需在工程根目录下运行以下命令即可。本例假设npm已经针对示例所用项目进行了初始化，package.json文件也已经存在。

$ npm install grunt --save-dev

现在，我们项目的package.json文件应该已经包含与清单中的示例代码相仿的Grunt条目。

清单2-5　更新后的package.json文件

// example-tasks/package.json{    "name": "example-tasks",    "version": "1.0.0",    "devDependencies": {        "grunt": "0.4.5"    }}

将Grunt与项目进行整合的最后一个步骤是创建Gruntfile（见清单），并保存在工程根目录下。我们的Gruntfile只调用了一个函数loadTasks()，其作用将在接下来的小节进行讨论。

清单2-6　我们的Gruntfile

// example-tasks/Gruntfile.jsmodule.exports = function(grunt) {    grunt.loadTasks('tasks');};

保持合理的Grunt模式

我们希望你在读完本章之后发现，Grunt的确是一件处理日常工作流程中遇到的乏味的重复性工作的利器。但是即便如此，还是不得不承认我们对Grunt的第一反应绝对算不上积极。事实上，刚开始我们对它兴趣不大。为了了解其中的原因，我们看一下放在Grunt官方文档显著位置的Gruntfile示例（见清单）。

清单2-7　Grunt官方文档提供的Gruntfile示例

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: '/*! <%= 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']);};

清单中略显臃肿的Gruntfile还是为相对简单的项目准备的。对于规模更大的项目，Gruntfile会像吹气球一样膨胀好几倍，最终结果就是一大堆根本无法阅读又难以维护的东西。有经验的开发者绝不会在写代码的时候，将不相关的功能模块揉在一起。否则，我们为什么还要在任务运行器上搞点儿花样出来呢？

正如清单中的代码所示，使Grunt模式保持合理的秘密就藏在Grunt的loadTasks()方法上。该例中task参数指向task文件夹，其路径以工程的Gruntfile为参考位置。loadTask()方法一被调用，Grunt就会加载并执行在该文件夹下发现的所有Node模块，并且每次都将Grunt对象的引用作为参数传进去。这样的行为使我们可以将项目的Grunt配置划分为一系列相互独立的模块，每个模块负责一个单独的任务或插件的加载及配置工作。清单展示了其中一个小型模块，模块中定义的任务可以通过在命令行中执行grunt uglify来运行。

清单2-8　task文件夹中的示例模块（uglify.js）

// example-tasks/tasks/uglify.jsmodule.exports = function(grunt) {    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.config('uglify', {        'options': {            'banner': '/*! <%= grunt.template.today("dd-mm-yyyy") %> */\n'        },        'dist': {            'files': {                'dist/app.min.js': ['src/index.js']            }        }    });};