前端自动化构建（二）----- grunt基本使用

前言：常见的自动化构建工具有Grunt , Gulp, FIS。Grunt 是最早的前端构建系统，但是会生成临时文件，有大量的磁盘读写的过程，构建速度比较慢。Gulp是目前最受欢迎的构建工具，对文件的处理都是在内存中完成，还能默认执行多个任务，相对来说构建速度比较快，效率比较高。FIS是把常见的需求直接集成，操作简单，方便，但不够灵活。
接下来就谈谈grunt 的基本使用

一、基本同步的任务的执行

yarn init --yes
yarn add grunt 

在文件根目录新建 gruntfile.js 作为grunt 的入口文件。

// gruntfile.js 文件
// 定义一些需要Grunt自动执行的任务，
// 需要导出一个函数
// 此函数接受一个Grunt 的形参，可沿用其提供的一写api
module.exports = grunt =>{
    grunt.registerTask ('foo',"任务描述",()=>{
        console.log('hello grunt foo');     
    })
    grunt.registerTask ('bar',"任务描述",()=>{
        console.log('hello grunt bar');    
    })
    grunt.registerTask ('default',['foo','bar']) 
    
}
//运行命令：
yarn grunt "foo"
yarn grunt   //默认执行grunt default 的任务

二、异步任务的执行

grunt 的操作是默认同步的模式，而异步任务的执行，需要调用this.async 得到一个回调函数，这个回调函数，要在你的异步操作执行结束后进行调用

// gruntfile.js 文件
// 异步任务的执行
    grunt.registerTask("async-task",function(){
        const done = this.async()
        setTimeout(()=>{
            console.log('async task woring');
            done()     
        },1000)
    })
//运行命令
yarn grunt async-task 即可运行异步任务

三、标记任务的失败。

直接在执行代码内部rentrun false ,异步任务则在this.async 回调函数中输入参数false ，即 done(false)。注意：失败任务会阻塞后面的任务的执行。可以后面添加 --force 来强制执行

四、多目标任务

Grunt 使用 registerMultiTask 来进行多目标任务，在使用多目标任务之前，需使用 initConfig 进行目标内容的配置，详情如下

//gruntfile.js 文件
// 多目标任务的执行
    grunt.initConfig({
        build:{
            options:{  //配置选项参数，通过this.options() 获取
                foo:'123'
            },
            css:{        //配置具体的目标名称，单独查看该目标可以使用 yarn grunt build:css 的方式运行
                options:{
                    foo:'234'  // 内部有配option 的信息，则会覆盖最终 this.options 的输出信息
                }
            },
            js:'567'
        }
    })

   grunt.registerMultiTask('build',function(){
        console.log(this.options());
        console.log(`target:${this.target},data:${this.data}`);       
    })
    //运行命令
    yarn grunt build 

五、grunt 常用插件使用及总结

sass , es6语法转换，文件监视。

yarn add grunt-sass sass
yarn add grunt-babel @babel/core @babel-preset-env --dev
yarn add load-grunt-tasks --dev
yarn add grunt-contrib-watch --dev