《JavaScript开发框架权威指南》——2.2 Grunt是如何工作的

简介: Grunt为开发者提供了一个工具包,用于创建命令行程序来执行项目构建过程中的重复性任务,如压缩JavaScript代码、编译Sass样式表等。不过,Grunt的能力并不限于创建简单的任务(通常这些任务不会被分享或者复用),以解决特定工程遇到的特定需求,其真正的力量源于其将任务打包为可复用的插件的能力。

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

2.2 Grunt是如何工作的

Grunt为开发者提供了一个工具包,用于创建命令行程序来执行项目构建过程中的重复性任务,如压缩JavaScript代码、编译Sass样式表等。不过,Grunt的能力并不限于创建简单的任务(通常这些任务不会被分享或者复用),以解决特定工程遇到的特定需求,其真正的力量源于其将任务打包为可复用的插件的能力。这些插件可以被发布、分享、使用以及由其他人进行改进。本书写作之时已经有超过4 400个这样的插件。

Grunt的运转依赖于四个核心组件,接下来逐一论述。

2.2.1 Gruntfile.js
在Grunt中处于核心地位的是Gruntfile——一个位于工程根目录下的名为Gruntfile.js(见清单)的Node模块。正是这个文件使得我们可以加载Grunt插件,创建自定义任务,并根据项目需求对它们进行配置。Grunt每次运行时的首要任务都是接受该模块发出的指令。

清单2-2 Gruntfile示例

// example-starter/Gruntfile.js

module.exports = function(grunt) {

    /**
     * 配置即将用到的任务和插件
     */
    grunt.initConfig({
        /* Grunt的file API为开发者提供了与文件系统进行交互所必需的抽象。稍后,我们将在
        本章对此进行深入了解。*/
        'pkg': grunt.file.readJSON('package.json'),
        'uglify': {
            'development': {
                'files': {
                    'build/app.min.js': ['src/app.js', 'src/lib.js']
                }
            }
        }
    });
    /**
    * Grunt插件以Node包的形式存在,并由npm发布。这里,我们加载的是grunt-contrib-uglify插件。
    * 该插件包含的任务可以对项目源代码进行合并与压缩,以备发布之用。
    */
    grunt.loadNpmTasks('grunt-contrib-uglify');

    /**
     * 这里,我们创建了一个名为default的任务,其仅有的功能就是调用uglify任务。换句话说,该任务
     * 实际上是uglify任务的别名。名为default的任务指明了在命令行中不带参数调用Grunt时应当执
     * 行的动作。在本例中,我们的default任务仅仅调用了一个单独的任务。不过(依次)调用多个任务
     * 其实同样简单,只要在传入的数组中添加多个条目即可。
     */
    grunt.registerTask('default', ['uglify']);

    /**
     * 这里,我们创建了一个自定义任务,利用Grunt内置的用户反馈(user feedback)方法,向控制台
     * 输出一条消息(后面还有一个换行符)。稍后,我们将在本章对此做深入了解。
     */
    grunt.registerTask('hello-world', function() {
        grunt.log.writeln('Hello, world.');
    });
};

2.2.2 任务(Tasks)
作为Grunt的基本构建模块,任务实际上只是由Grunt的registerTask()方法注册的具名函数。清单所示的hello-world任务将向控制台输出一条消息。在命令行中调用该任务的结果,如清单所示。

清单2-3 运行清单中所示的hello-world任务

$ grunt hello-world
Running "hello-world" task
Hello, world.

Done, without errors.

如清单所示,多个Grunt任务也可以由单条命令调用执行。每个任务都将按照参数的传入顺序依次执行。

清单2-4 顺序运行多个任务

$ grunt hello-world uglify
Running "hello-world" task
Hello, world.

Running "uglify:development" (uglify) task
>> 1 file created.

Done, without errors.

我们刚看到的hello-world任务是简单独立型Grunt任务的代表。这样的任务可以用于实现一些简单的功能,以解决特定项目的需求。通常我们不会考虑其复用或者分享的问题。但是多数时候,你会发现我们实际用到的都不是这样的独立型任务,而是那些已经打包为Grunt插件并发布到npm的任务。以插件的形式发布更便于别人使用或者参与改进。

2.2.3 插件(Plugins)
Grunt插件是一系列能够用于不同项目的可配置任务(以npm包的形式发布)的集合。现存的Grunt插件数以千计,可谓洋洋大观。清单中的Grunt方法loadNpmTasks()用以加载名为grunt-contrib-uglify的Node模块。该模块可以将工程中的JavaScript代码合并为单个压缩(minified)文件,以适应发布需求。

2.2.4 配置
Grunt以强调“配置优先”(configuration over code)而著称:任务和插件的功能均可通过配置文件进行定制,以适应不同工程的需求。正是这种代码与配置分离的特性,使开发者能够创造出容易被复用的插件。本章稍后将介绍配置Grunt插件和任务的各种不同的方法。

相关文章
|
4月前
|
JavaScript 前端开发 程序员
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
JavaScript是Web标准语言,广泛应用于各类浏览器,造就了其最广泛部署的地位。Node.js的兴起扩展了JavaScript的使用场景,使其成为开发者首选语言。无论新手还是经验丰富的程序员,都能受益于学习JavaScript。[《JavaScript权威指南第7版》资源链接](https://zhangfeidezhu.com/?p=224)
254 5
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
|
6月前
|
XML 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(2)
JavaScript 权威指南第七版(GPT 重译)(六)
97 4
JavaScript 权威指南第七版(GPT 重译)(六)(2)
|
6月前
|
存储 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(4)
JavaScript 权威指南第七版(GPT 重译)(六)
208 3
JavaScript 权威指南第七版(GPT 重译)(六)(4)
|
6月前
|
前端开发 JavaScript 安全
JavaScript 权威指南第七版(GPT 重译)(六)(1)
JavaScript 权威指南第七版(GPT 重译)(六)
69 3
JavaScript 权威指南第七版(GPT 重译)(六)(1)
|
6月前
|
存储 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(五)(4)
JavaScript 权威指南第七版(GPT 重译)(五)
65 9
|
6月前
|
前端开发 JavaScript 程序员
JavaScript 权威指南第七版(GPT 重译)(五)(3)
JavaScript 权威指南第七版(GPT 重译)(五)
62 8
|
6月前
|
机器学习/深度学习 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(五)(1)
JavaScript 权威指南第七版(GPT 重译)(五)
66 8
|
6月前
|
JSON JavaScript 前端开发
JavaScript 权威指南第七版(GPT 重译)(四)(4)
JavaScript 权威指南第七版(GPT 重译)(四)
106 6
|
6月前
|
前端开发 JavaScript API
JavaScript 权威指南第七版(GPT 重译)(六)(3)
JavaScript 权威指南第七版(GPT 重译)(六)
105 4
|
6月前
|
JSON 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(五)(2)
JavaScript 权威指南第七版(GPT 重译)(五)
103 5
下一篇
无影云桌面