Grunt-简单使用

在这里插入图片描述

前言
为何要用构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(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更高级的用法请关注我接下来的文章,谢谢

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值