简介
Grunt是一个用于自动执行任务的插件，用于减少重复劳动，提高效率。你可以事先定义好一系列任务，然后输入命令，预先编排好的任务就会被依次执行。
Grunt分为两部分，全局安装的grunt-cli，用于执行grunt命令，以及项目中安装的grunt，这个是本体，你可以用它进行实际任务的编排。执行如下命令来安装这两者：
// 安装 grunt 命令行
npm install -g grunt-cli
// 安装 grunt 本体
npm install grunt --save-dev
编排任务
编排任务分为以下三个步骤：
-
安装任务：从
npm上下载想要执行的任务 - 配置任务：将任务配置成自己需要的样子
-
注册任务：将编排好的任务告诉
grunt
在npm中有许多别人已经写好的任务，例如编译ts文件、复制文件、监听文件改变等等。官方发布的任务以grunt-contrib-开头，而第三方发布的任务以grunt-开头。
你需要在项目根目录下新建名为Gruntfile.js的文件。例如，接下来就是一个用于自动编译ts文件的Gruntfile.js：
module.exports = function(grunt) {
// 载入 npm 任务
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks("grunt-ts")
// 初始化任务
grunt.initConfig({
// ts 编译任务
ts: {
default : {
options: {
sourceMap: false,
rootDir: "src/"
},
src: ["src/**/*.ts"],
outDir: 'dict/'
}
},
// 代码监听任务
watch: {
files: "src/*.*",
tasks: [ "ts" ]
}
})
// 注册任务
grunt.registerTask("default", [ "watch" ])
};
可以看到文件的主要内容分为三部分：
- 使用
grunt.loadNpmTasks加载任务。注意，使用该方法要先执行对应的npm install命令安装任务。上面示例的安装命令如下：
npm install grunt-ts grunt-contrib-watch typescript --save-dev
- 使用
grunt.initConfig初始化任务，这一块是Gruntfile.js的主要内容，将任务初始化成自己想要的样子，具体的配置文档都可以在对应的包介绍中找到。
示例中的
ts通过src指定了要进行编译的typescript源目录、通过outDir指定了输出目录。而watch则是通过files指定了要监听的目录。
- 使用
grunt.registerTask注册任务，这个方法接受两个参数，第一个参数是任务名称，default是指定默认任务。第二个是要执行的任务列表，触发后会依次执行。该方法可以调用多次来指定多个任务。
执行任务
执行注册任务
配置好Gruntfile.js之后就可以执行任务了，在上面的示例中注册了default默认任务，所以只需要执行grunt就可以执行任务了，如果注册了其他的任务名，执行grunt <任务名>即可。
执行单个任务
你也可以直接执行grunt.initConfig中初始化的任务，例如:
// 单独执行 ts 编译任务
grunt ts
创建任务
上面说的都是使用别人预制好的任务，再通过配置来完成自己的需求，接下来讲解如何自定义任务。创建任务的流程如下：
- 安装任务初始化工具
npm install -g grunt-init - 下载任务模板
git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin. windows 请 clone 到%USERPROFILE%\.grunt-init\gruntplugin。 - 切换到想要存放任务的空目录，执行初始化
grunt-init gruntplugin - 安装依赖
npm install - 打开
./tasks/任务名.js，找到grunt.registerMultiTask()方法，开始你的表演 - 将编辑好的任务提交至 npm
npm publish
获取用户的initConfig配置
在任务模板中的grunt.registerMultiTask()方法中，你可以通过this.options()获取用户的配置，也可以从this.data找到整个用户设置，更多获取方式console.log(this)可以找到。
处理异步任务
你可以在任务的开头通过const done = this.async()获取一个完成任务的方法，在异步回调里调用done()就可以完成任务。
调试任务
在任务模板文件夹根目录下你是可以找到Gruntfile.js的，但是不能直接运行，你需要先在grunt.initConfig中配置你的测试任务，然后grunt.registerTask注册，之后就可以进行测试了。
网友评论