本文主要讲Grunt任务配置。

说明:本文所有示例都基于Grunt 0.4.5版本。

一 说明

使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如:拷贝内容、混淆压缩、格式检查、清除等),当输入grunt命令时,就逐个执行配置好的任务,从而实现项目打包等工程化工作。

Grunt的任务配置都是在 Gruntfile.js文件 中的grunt.initConfig(configObj)参数configObj中指定的。如果你还不知道 Gruntfile.js 是什么,请先阅读 Grunt 学习笔记【1】----基础知识

每个任务都是configObj的一个对象类型的属性,在这个属性中配置该任务的信息。

configObj中可以定义任何其它数据,但要注意,一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略。

此外,由于这本身就是JavaScript,因此你不仅限于使用JSON;你可以在这里使用任何有效的JavaScript。必要的情况下,你甚至可以以编程的方式生成配置。

 grunt.initConfig({
concat: {
// 这里是concat任务的配置信息。
},
uglify: {
// 这里是uglify任务的配置信息
},
// 任意数据。
my_property: 'whatever',
my_src_files: ['foo/*.js', 'bar/*.js'],
});

二 配置任务信息

在grunt.initConfig(configObj)参数configObj中配置任务信息,每个任务都是configObj的一个对象类型的属性,在这个属性中配置该任务的信息。

当运行一个任务时,Grunt会自动查找配置对象configObj中的同名属性。

多任务(一种类型任务,但需要多次执行)可以通过任意命名的“目标(target)”来定义多个配置。在下面的案例中,concat类型的任务有名为foo和bar两个目标,而uglify任务仅仅只有一个名为bar目标。

 grunt.initConfig({
concat: {
foo: {
// concat task "foo" target options and files go here.
},
bar: {
// concat task "bar" target options and files go here.
},
},
uglify: {
bar: {
// uglify task "bar" target options and files go here.
},
},
});

同时指定任务(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对象是可选的,如果不需要,可以忽略。

 grunt.initConfig({
concat: {
options: {
// 这里是任务级的Options,覆盖默认值
},
foo: {
options: {
// "foo" target options may go here, overriding task-level options.
},
},
bar: {
// No options specified; this target will use task-level options.
},
},
});

指定任务处理的文件和输出的文件,有如下3种方式:

方式一:简洁格式

通过src和dest属性指定任务处理和输出的文件。通常情况下它用于只读任务,比如grunt-contrib-jshint,它就只需要一个单一的src属性,而不需要关联的dest选项。这种格式还支给每个src-dest文件映射指定额外的属性(例如:filter、nonull等)。

方式二:文件对象格式

通过files属性指定任务处理和输出的文件,files对象的属性名就是输出文件路径和文件名字符串,处理文件就是它的值(处理的文件列表则使用数组格式声明)。可以使用这种方式指定数个src-dest文件映射, 但是不能够给每个映射指定附加的属性。

方式三:文件数组格式

将files属性定义为数组,数组每个元素定义了处理和输出的文件。同时可以指定额外属性(例如:filter、nonull等)。

 // 方式一
grunt.initConfig({
jshint: {
foo: {
src: ['src/aa.js', 'src/aaa.js']
},
},
concat: {
bar: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js',
},
},
});
// 方式二
grunt.initConfig({
concat: {
foo: {
files: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
},
}
},
});
 // 方式三
grunt.initConfig({
concat: {
foo: {
files: [
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
],
},
bar: {
files: [
{src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
{src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
],
},
},
});

有关配置任务的其它设置,详细参考文章第三部分。

三 创建任务

上边第一步将任务的所需要的信息都配置好了,接下来就要将具体的任务告诉Grunt。

所谓任务,实际上就是一个函数,这个函数实现了一个功能(例如:清除、混淆压缩、打日志)。

任务有2种形式:

1)自定义的任务;

2)外部定义好的任务,即各种Grunt插件。

Grunt插件非常丰富,基本上不用自定义任务。这里主要讲使用Grunt插件。有关自定义插件任务,在后边会详细说明。

下边两种方式都可以加载Grunt插件任务:

 // 加载Grunt插件任务方式一
grunt.task.loadNpmTasks('grunt-contrib-clean'); // 加载Grunt插件任务方式二
grunt.loadNpmTasks('grunt-contrib-clean');

四 将任务添加到默认任务列表中

实际场景中,会有很多个任务,我们期望在命令行中输入grunt后,这些任务都能按照顺序依次执行。而不是多次输入“grunt 任务名:目标名”。

可以通过注册名字为“default”的别名任务,来实现这一功能。

 task.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

还可以指定参数:

 // 当执行grunt时,将执行concat任务的dist目标任务,然后执行uglify的dist目标任务
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

Grunt 学习笔记【2】---- 配置和创建任务的更多相关文章

  1. V-rep学习笔记:机器人模型创建3—搭建动力学模型

    接着之前写的V-rep学习笔记:机器人模型创建2—添加关节继续机器人创建流程.如果已经添加好关节,那么就可以进入流程的最后一步:搭建层次结构模型和模型定义(build the model hierar ...

  2. V-rep学习笔记:机器人模型创建2—添加关节

    下面接着之前经过简化并调整好视觉效果的模型继续工作流,为了使模型能受控制运动起来必须在合适的位置上添加相应的运动副/关节.一般情况下我们可以查阅手册或根据设计图纸获得这些关节的准确位置和姿态,知道这些 ...

  3. Linux内核分析第六周学习笔记——分析Linux内核创建一个新进程的过程

    Linux内核分析第六周学习笔记--分析Linux内核创建一个新进程的过程 zl + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  4. Redis学习笔记4-Redis配置详解

    在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...

  5. EasyARM i.mx287学习笔记——minicom配置和使用

    0 前言     在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了.     本文说明虚拟机中怎样使用minico ...

  6. EF6学习笔记(六) 创建复杂的数据模型

    EF6学习笔记总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 本篇原文地址:Creating a More Complex Data Model 本篇讲的比较碎,很多内容本人 ...

  7. Linux内核学习笔记之seq_file接口创建可读写proc文件

    转自:http://blog.csdn.net/mumufan05/article/details/45803219 学习笔记与个人理解,如有错误,欢迎指正. 温馨提示:建议跟着注释中的编号顺序阅读代 ...

  8. Grunt学习笔记【8】---- grunt-angular-templates插件详解

    本文主要讲如何用Grunt打包AngularJS的模板HTML. 一 说明 AngularJS中使用单独HTML模板文件的地方非常多,例如:自定义指令.ng-include.templateUrl等. ...

  9. Grunt学习笔记【7】---- grunt-contrib-less插件详解

    本文主要讲如何使用Grunt实现less文件压缩. 一 说明 less是非常常用的样式框架之一,Grunt也提供了可以编译和打包less样式文件的插件:grunt-contrib-less. 实现原理 ...

随机推荐

  1. NOIP2016模拟赛三 Problem C: 不虚就是要AK

    题目大意 给定一棵带有边权的树, 问你在树上随机选两个点, 它们最短路径上的边权之和为\(4\)的倍数的概率为多少. Solution 树分治. 没什么好讲的. #include <cstdio ...

  2. Python学习笔记——安装

    最近打算使用下GAE,便准备学习一下python.我对python是一窍不通,因此这里将我的学习历程记录下来,方便后续复习. 安装python: 可以从如下地址:http://www.python.o ...

  3. Docking For WPF–AvalonDock

    桌面程序的应用,不可避免的就会用到大量的布局控件,之前的一个项目也想过去做类似于Visual Studio的那种灵活的布局控件,也就是界面上的控件能够实现拖拽放置.隐藏.窗口化等一系列的操作,但由于开 ...

  4. uiaotumator ui測试 高速调试

    1. uiaotumator ui測试 Demo.java package uiautomatorDemo1; import java.io.File; import android.graphics ...

  5. 修改Linux基本配置

    1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=server1.cn 2.修改ip地址 vi /etc/sysconfig/netw ...

  6. 19. Spring Boot 添加JSP支持【从零开始学Spring Boot】

    转:http://blog.csdn.net/linxingliang/article/details/52017140 这个部分比较复杂,所以单独创建一个工程来进行讲解: 大体步骤: (1)     ...

  7. mysqldumps 远程备份

    普通模式 mysqldump -uroot -ppassword -h10.26.114.25 -P3306 --databases databasename > XXX.sql 多条在一起模式 ...

  8. Android设计模式之中的一个个样例让你彻底明确装饰者模式(Decorator Pattern)

    导读 这篇文章中我不会使用概念性文字来说明装饰者模式.由于通常概念性的问题都非常抽象.非常难懂.使得读者非常难明确究竟为什么要使用这样的设计模式.我们设计模式的诞生,肯定是前辈们在设计程序的时候遇到了 ...

  9. 【Python】列表~深入篇

    列表是一列按特定顺序排列的元素组成. 在Python中,用方括号[]来表示列表 下面是一个语言列表 Language = ['Chinese','English','Franch','Deutsch' ...

  10. 对datatable进行linq过滤

    实例: DataTable data = new DataTable(); data.Columns.Add("schoolid", Type.GetType("Syst ...