Grunt 自动化构建工具

生态插件完善，几乎可以完成你想要做的事情,但是由于工作过程是基于临时文件去实现的,所以它的构建速度相对比较慢（因为需要读写，在磁盘中完成）

一：Grunt的基本使用

yarn init --yes 初始化一个package.json文件
yarn add grunt 安装grunt模块
code gruntfile.js(或者手动添加)在根目录添加一个gruntfile.js文件

该文件为Grunt的入口文件
用于定义一些需要Grunt自动执行的任务
需要导出一个函数
此函数接收一个grunt的形参,内部提供一些创建任务时可以用到的API)
4.其他可以查看grunt-sample文件中的gruntfile.js文件

截屏2022-07-11 下午9.47.04.png

    //Grunt的入口文件
    //用于定义一些需要 Grunt 自动执行的任务
    //需要导出一个函数
    //此函数接收一个 Grunt 的形参，内部提供一些创建任务时可以用到的API

module.exports = grunt => { 
    // 注册任务(创建任务)--->grunt.registerTask
    //第一个参数为任务的名字,第二个参数可以指定一个任务函数(任务发生时自动执行得到函数)
    //提供yarn grunt foo运行后输出hello grunt
    grunt.registerTask('foo', () => { 
        console.log('hello grunt');
    })

    //如果第二个参数为字符串那么会成为描述信息,他会出现在grunt的帮助信息当中
    //可以通过yarn grunt --help去得到grunt的帮助信息
    //也可以通过yarn grunt bar 运行这个任务
    grunt.registerTask('bar', '任务描述', () => {
        console.log('other task~');
    })
    

    //如果任务名称叫default,那么这个任务将会成为grunt的默认任务,提供yarn grunt即可运行
    // grunt.registerTask('default', () => { 
    //     console.log('default');
    // })

    //一般default的做法是去映射一些任务,第二个参数为数组,那么就会依次执行这些方法
    grunt.registerTask('default', ['foo', 'bar'])
    

    //grunt代码默认执行同步模式,如果需要执行异步代码需要使用this.async
    grunt.registerTask('async-task', function () { 
        const done = this.async()
        setTimeout(() => {
            console.log('async');
            //调用这个函数标识这个任务已经完成
            done()
        }, 1000);
    })
}

二：Grunt标记任务失败

如果在构建业务的逻辑代码当中发生错误.那么即可将任务标记为失败任务
可以在函数体当中通过return false
在defaul执行多个方法时可以通过 yarn grunt default --force
在异步方法中可以在异步回调函数中传入一个实参false
具体代码可以查看grunt-sample中的gruntfile.js

module.exports = grunt => { 
    //通过return false 标记任务失败,那么执行这个任务的时候就会报错
    grunt.registerTask('bad', () => { 
        console.log('bad');
        return false
    })

    grunt.registerTask('foo', () => { 
        console.log('foo');
    
    })
    
     grunt.registerTask('bar', () => { 
        console.log('bar');
        
     })
    //但是通过return  fault  方法时，在下面default方法中会导致后面的方法无法执行
    //或者可以通过yarn grunt default --force就是第一个错误后面的任务也可以正常执行
    grunt.registerTask('default', ['bad', 'foo', 'bar'])
    

    //如果是异步任务就无法通过return false标记任务失败
    //可以通过在异步的回调函数传入一个实参false
    grunt.registerTask('async', function () { 
        const done = this.async()
        setTimeout(() => {
            console.log('async');
            done(false)
        }, 1000);
    })
}

三：Grunt的配置方法(配置任务)

grunt.initConfig

module.exports = grunt => { 
    grunt.initConfig({
        foo:'bar'
    })

    grunt.registerTask('foo', () => { 
        //通过grunt.config()可以获取配置数据
        console.log(grunt.config('foo'));
    })
}

四：Grunt多目标任务

grunt.registerMultiTask

module.exports = grunt => { 
    grunt.initConfig({
        //这里的build需要和下面的任务名同名
        build: {
            //这是配置选项，不会再执行的时候被target和data获取,但是可以通过this.options()方法获取
            options: {
                foo:'bar'
            },
            css: '1',
            js: '2',
            html: {
                options: {
                    foo:'bar'
                }
            }
        }
    })

    //多目标模式,可以让任务根据配置形成多个子任务
    //需要grint.initConfig创建任务
    //可以通过yarn grunt build 运行多个任务
    //也可以通过yarn grunt build:css 运行单个任务(这里的css是上面定义的key)
    grunt.registerMultiTask('build', function(){ 
        console.log('build task');
        //可以通过this.target 和  this.data获取配置数据
        console.log(`target:${this.target},data:${this.data}`)
        //获取配置方法
        console.log(this.options())
    })
}

五：Grunt插件的使用

安装插件
grunt.loadNpmTasks加载插件

// 插件
//比如grunt-contrib-clean插件
//通过yarn add grunt-contrib-clean安装
//通过yarn grunt clean  对应的文件就会被清除
module.exports = grunt => { 
    grunt.initConfig({
        clean: {
            //这是删除某一个文件
            // temps: 'temp/add.js'
            //也可以使用通配符,代表删除所有js文件
            // temp:'temp/*.js'
            //或者**代表所有文件---temp下的所有文件
            // temp:'temp/**'
        }
    })
    grunt.loadNpmTasks('grunt-contrib-clean')
}