本文主要讲Grunt任务配置。
说明:本文所有示例都基于Grunt 0.4.5版本。
一 说明
使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如:拷贝内容、混淆压缩、格式检查、清除等),当输入grunt命令时,就逐个执行配置好的任务,从而实现项目打包等工程化工作。
Grunt的任务配置都是在 Gruntfile.js文件
中的grunt.initConfig(configObj)
参数configObj中指定的。如果你还不知道 Gruntfile.js 是什么,请先阅读 Grunt 学习笔记【1】----基础知识。
每个任务都是configObj的一个对象类型的属性,在这个属性中配置该任务的信息。
configObj中可以定义任何其它数据,但要注意,一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略。
此外,由于这本身就是JavaScript,因此你不仅限于使用JSON;你可以在这里使用任何有效的JavaScript。必要的情况下,你甚至可以以编程的方式生成配置。
1 grunt.initConfig({ 2 concat: { 3 // 这里是concat任务的配置信息。 4 }, 5 uglify: { 6 // 这里是uglify任务的配置信息 7 }, 8 // 任意数据。 9 my_property: 'whatever', 10 my_src_files: ['foo/*.js', 'bar/*.js'], 11 });
二 配置任务信息
在grunt.initConfig(configObj)
参数configObj中配置任务信息,每个任务都是configObj的一个对象类型的属性,在这个属性中配置该任务的信息。
当运行一个任务时,Grunt会自动查找配置对象configObj中的同名属性。
多任务(一种类型任务,但需要多次执行)可以通过任意命名的“目标(target)”来定义多个配置。在下面的案例中,concat类型的任务有名为foo和bar两个目标,而uglify任务仅仅只有一个名为bar目标。
1 grunt.initConfig({ 2 concat: { 3 foo: { 4 // concat task "foo" target options and files go here. 5 }, 6 bar: { 7 // concat task "bar" target options and files go here. 8 }, 9 }, 10 uglify: { 11 bar: { 12 // uglify task "bar" target options and files go here. 13 }, 14 }, 15 });
同时指定任务(task)和目标(target),例如grunt concat:foo
或者grunt concat:bar
,将只会处理指定目标(target)的配置,而运行grunt concat
将遍历所有目标(target)并依次处理。注意,如果一个任务使用grunt.task.renameTask重命名过,Grunt将在配置对象中查找以新的任务名命名的属性。
options属性:
在一个任务配置中,options属性可以用来指定覆盖内置属性的默认值。此外,每一个目标(target)中还可以拥有一个专门针对此目标(target)的options属性。目标(target)级的options将会覆盖任务级的options。
options对象是可选的,如果不需要,可以忽略。
1 grunt.initConfig({ 2 concat: { 3 options: { 4 // 这里是任务级的Options,覆盖默认值 5 }, 6 foo: { 7 options: { 8 // "foo" target options may go here, overriding task-level options. 9 }, 10 }, 11 bar: { 12 // No options specified; this target will use task-level options. 13 }, 14 }, 15 });
指定任务处理的文件和输出的文件,有如下3种方式:
方式一:简洁格式
通过src和dest属性指定任务处理和输出的文件。通常情况下它用于只读任务,比如grunt-contrib-jshint,它就只需要一个单一的src属性,而不需要关联的dest选项。这种格式还支给每个src-dest
文件映射指定额外的属性(例如:filter、nonull等)。
方式二:文件对象格式
通过files属性指定任务处理和输出的文件,files对象的属性名就是输出文件路径和文件名字符串,处理文件就是它的值(处理的文件列表则使用数组格式声明)。可以使用这种方式指定数个src-dest
文件映射, 但是不能够给每个映射指定附加的属性。
方式三:文件数组格式
将files属性定义为数组,数组每个元素定义了处理和输出的文件。同时可以指定额外属性(例如:filter、nonull等)。
1 // 方式一 2 grunt.initConfig({ 3 jshint: { 4 foo: { 5 src: ['src/aa.js', 'src/aaa.js'] 6 }, 7 }, 8 concat: { 9 bar: { 10 src: ['src/bb.js', 'src/bbb.js'], 11 dest: 'dest/b.js', 12 }, 13 }, 14 });
// 方式二 grunt.initConfig({ concat: { foo: { files: { 'dest/a.js': ['src/aa.js', 'src/aaa.js'], 'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'], }, } }, });
1 // 方式三 2 grunt.initConfig({ 3 concat: { 4 foo: { 5 files: [ 6 {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'}, 7 {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}, 8 ], 9 }, 10 bar: { 11 files: [ 12 {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true}, 13 {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'}, 14 ], 15 }, 16 }, 17 });
有关配置任务的其它设置,详细参考文章第三部分。
三 创建任务
上边第一步将任务的所需要的信息都配置好了,接下来就要将具体的任务告诉Grunt。
所谓任务,实际上就是一个函数,这个函数实现了一个功能(例如:清除、混淆压缩、打日志)。
任务有2种形式:
1)自定义的任务;
2)外部定义好的任务,即各种Grunt插件。
Grunt插件非常丰富,基本上不用自定义任务。这里主要讲使用Grunt插件。有关自定义插件任务,在后边会详细说明。
下边两种方式都可以加载Grunt插件任务:
1 // 加载Grunt插件任务方式一 2 grunt.task.loadNpmTasks('grunt-contrib-clean'); 3 4 // 加载Grunt插件任务方式二 5 grunt.loadNpmTasks('grunt-contrib-clean');
四 将任务添加到默认任务列表中
实际场景中,会有很多个任务,我们期望在命令行中输入grunt后,这些任务都能按照顺序依次执行。而不是多次输入“grunt 任务名:目标名”。
可以通过注册名字为“default”的别名任务,来实现这一功能。
1 task.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
还可以指定参数:
1 // 当执行grunt时,将执行concat任务的dist目标任务,然后执行uglify的dist目标任务 2 task.registerTask('dist', ['concat:dist', 'uglify:dist']);
注意:这个步骤不是必须的,有些可以通过配置package.json的scripts参数,实现多任务执行。
参考资料&内容来源:
Grunt官网:https://www.gruntjs.net/configuring-tasks
博客园:https://www.cnblogs.com/chaojidan/p/4238421.html
Grunt官网API:https://gruntjs.com/api/grunt