前言
为何要用构建工具?
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,
自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,
任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
为什么要使用 Grunt?
Grunt 生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,
因此,你可以利用 Grunt 自动完成任何事
Grunt基本使用
安装grunt yarn add grunt
1、包含执行 yarn grunt + 任务名
2、任务描述 yarn grunt + 任务名
3、默认任务 yarn grunt
4、组合任务 yarn grunt
5、执行异步任务 yarn grunt + 任务名
module.exports = grunt => {
//第1、registerTask第一个参数代表任务名,第二个参数代表需要do something
grunt.registerTask("foo", () => {
console.log('hello world');
});
//第2、任务描述,第二个参数自定义代表任务描述
grunt.registerTask("bar", '关于任务描述', () => {
console.log('other task');
});
//第3、如果任务名是default,默认运行的时候不需要加任务名,直接运行任务
// grunt.registerTask('default', () => {
// });
//第4、一般使用default作为任务名,第二个参数默认为数组,数组里面为多个任务名
grunt.registerTask('default', ['foo', 'bar']);
//第5、执行异步任务,在grunt中默认是同步执行,如果是异步任务的话需要调用this.async()方法
//在异步结束后调用这个函数如下代码所示
//在这里不能使用箭头函数,如果使用箭头函数this指向有问题
grunt.registerTask('async-task', function() {
//使用done 更好地语义化
const done = this.async();
setTimeout(() => {
console.log('async-task');
//调用done
done();
}, 1000);
})
}
谢谢观看,本篇主要是简单介绍如何使用grunt,
关于grunt更高级的用法请关注我接下来的文章,谢谢