一, grunt 模块简介
grunt 插件, 是一种 NPM 环境下的自动化工具. 对于需要反复重复的任务, 例如压缩, 编译, 单元测试, linting 等, 自动化工具可以减轻你的劳动, 简化你的工作. grunt 模块根据 Gruntfile.JS 文件中的配置进行任务.
如果在 package.JSON 中定义如下命令:
- "scripts": {
- "build": "npm install && grunt"
- }
因为运行 NPM run build 会先安装 devDependencies 中定义的一些模块, 则运行 NPM run build 这个命令相当于做如下操作:
- NPM install grunt-cli -g
- NPM install
- grunt
二, gruntfile.JS 的结构:
"wrapper" 函数
项目和任务配置
加载 grunt 插件和任务
自定义任务
三,"wrapper" 函数
每一份 Gruntfile.JS(和 grunt 插件)都遵循同样的格式, 你所书写的 Grunt 代码必须放在此函数内:
- module.exports = function(grunt){
- //do grunt-related things in here
- }
四, 项目和任务配置
大部分的 Grunt 任务都依赖某些配置数据, 我们通过 grunt.initConfig 方法来配置 Grunt 任务的参数.
grunt.initConfig 方法的参数是一个 JSON 对象, 你可以在这个配置对象中存储任意的数据. 此外, 由于这本身就是 JavaScript, 你还可以在这里使用任意的有效的 JS 代码. 甚至你可以用 <% %> 模板字符串来引用已经配置过的属性, 例如:
- // 项目和任务配置
- grunt.initConfig({
- pkg: grunt.file.readJSON('package.json'), // 获取 package.JSON 中的元数据(JS 代码)
- proj:{
- name:'hello',
- description:'a hello demo'
- },
- hello: {
- options: {
- name: '<%= proj.name %>' // 用 <% %> 模板字符串匹配 hello
- },
- srcs: ['1.txt', '2.txt']
- }
- });
在 grunt.initConfig 方法中配置的属性, 在任务模块中, 可用 grunt.config 方法进行访问, 例如:
grunt.config("proj.name");
另外, grunt 任务模块会自动根据任务名来提取配置对象中和任务名对应的属性, 比如定义任务 hello, 则在配置对象对应的属性 "hello" 中配置任务执行函数中所需用到的配置和数据.
五, 加载 grunt 插件任务
为了减少重复劳动, 我们可以加载已有的插件任务.
1. 加载自己私有的 grunt 插件
可将自己定义的一些 task 脚本放在同一个目录下, 通过 grunt.loadTasks 方法从指定目录加载该目录下所有的 grunt 任务脚本.
2. 加载在 NPM 中发布的 grunt 插件
像 grunt-contrib-copy 和 grunt-contrib-uglify 这些常用的任务都已经以 grunt 插件的形式被开发出来了, 且被发布在 NPM 公开库中, 只要在 package.JSON 文件中将需要使用的插件列在 dependency 中, 并通过 NPM install 安装之后, 就可以直接加载该任务.
- // 加载能够提供 "copy" 任务的插件.
- grunt.loadNpmTasks('grunt-contrib-copy');
3. 直接加载所有以 "grunt-" 打头的插件
NPM 上有个 load-grunt-tasks 插件可以用来加载 dependency 列表中所有以 "grunt-" 打头的插件.
将需要使用的 "grunt-" 打头的插件列在 dependency 中, 然后在 Gruntfile.JS 中进行调用.
- //Load grunt tasks from NPM packages
- load-grunt-tasks
六, 自定义任务
1. 直接定义任务的行为
- grunt.registerTask('hello', 'Show some msg', function() {
- console.log(this.options().name); // 输出 hello
- });
2. 定义为任务列表
可以将一个任务定义为一系列任务的组合, 这一系列任务将按照顺序执行.
grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);
3. 定义默认任务
通过定义 default 任务, 可以让 Grunt 默认执行一个或多个任务. 执行 grunt 命令时如果不指定一个任务的话, 将会执行默认任务. 如进行下面定义的话执行 grunt 相当于执行 grunt hello.
grunt.registerTask('default', ['hello']);
4. 定义复合任务
registerMultiTask 方法可以定义一个复合任务, 复合任务将会对 grunt.initConfig 方法中配置的相应属性中除了 options 外定义的属性依次作为 target:data 对进行处理.
- module.exports = function(grunt) {
- grunt.initConfig({
- Log: {
- options: {
- sep: ';'
- },
- srcs: ['1.txt', '2.txt'],
- dests: ['d1.txt', 'd2.txt']
- }
- });
- grunt.registerMultiTask("Log", function() {
- var options = this.options({ sep: '&' });
- console.log(this.target);
- console.log(this.data.join(options.sep));
- });
- };
执行 grunt Log 将会输出:
- Running "Log:srcs" (Log) task
- srcs
- 1.txt;2.txt
- Running "Log:dests" (Log) task
- dests
- d1.txt;d2.txt
定义任务行为 Tips
1. 任务内部可以执行其他的任务.
- grunt.registerTask('mytask', function() {
- grunt.task.run('task1', 'task2');
- // Or:
- grunt.task.run(['task1', 'task2']);
- });
2. 定义异步任务
- grunt.registerTask('mytask', function() {
- var done = this.async();
- //do something
- done();
- });
3. 当任务失败时, 所有后续任务都将终止
在任务中, 当执行失败, 可以 return false 来表明当前任务执行失败, 一般, 多个任务按顺序执行, 如果有任务失败时, 所有后续任务都将终止. 可以通过在命令行后加上 --force 来使有任务失败时, 后续任务能继续进行.
4. 任务中检查前置任务状态
有些任务可以依赖于其他任务的成功执行. 通过 grunt.task.requires 方法来检查其前置任务是否已经执行, 并且没有失败.
5. 任务中检查配置属性
可以用方法 grunt.task.requiresConfig 指定一个或者多个字符串或者数组的配置属性为必需的. 如果一个或多个必需的配置属性缺失, 就通知系统当前任务失败.
来源: https://www.cnblogs.com/studynote/p/11882605.html