《JavaScript开发框架权威指南》——2.3 将Grunt添加到项目中

本节书摘来自异步社区《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.js

module.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.js

module.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']
            }
        }
    });

};