grunt的基本使用

● 新建一个项目
● 初始化
● 安装模块：yarn add grunt
● 根目录创建入口文件:gruntfile.js
● 注册任务foo

module.exports = grunt =>{
    grunt.registerTask('foo',()=>{
        console.log('foo')
    })
}

● 执行任务:yarn grunt foo
● default任务为默认任务，第二个参数可以是提示，直接运行yarn grunt即可

 grunt.registerTask('default','任务描述',()=>{
        console.log('default')
    })

● 可以使用default任务，关联其它任务

 grunt.registerTask('default',['foo'])

● 创建异步任务

 grunt.registerTask('async',function(){
        const done = this.async()
        setTimeout(()=>{
            console.log('sx')
            done()
        })
    })

● 失败任务标记
○ 同步任务：return false即可表示任务失败
○ 失败任务导致后面以此执行的任务不再执行
○ 命令上加上 --force可以解决这个问题：yarn grunt --force
○ 异步失败的标记可以向done回调中传入false

module.exports = grunt =>{
   grunt.registerTask('foo',()=>{
       console.log('foo')
       return false
   })

   grunt.registerTask('foo2',()=>{
       console.log('foo2')
       // return false
   })
   grunt.registerTask('foo3',()=>{
       console.log('foo3')
       // return false
   })
   grunt.registerTask('default',['foo','foo2','foo3'])
   grunt.registerTask("async",function(){
       const done = this.async()
       setTimeout(() => {
           console.log('sx')
           done(false)
       }, 1000);
   })
  
}

● 通过initConfig属性可以注册一些列配置，然后通过注册命令拿到配置

  grunt.initConfig({
       sx:{
           bar:'sx'
       }
   })
   grunt.registerTask('foo',()=>{
       console.log(grunt.config('sx'))
       
   })

● 多目标任务
○ 每一个ininConfig中的键值可以看作是一个子目标
○ 通过多目标模式，可以读取每一个子目标

grunt.initConfig({
      'build':{
        css:{
            bar:'sx'
        },
        js:'2'
      }  
    })
    grunt.registerMultiTask('build',function(){
        console.log(`${this.target}:${this.data}`)
    })

○ 其中，输入yarn grunt build默认运行所有目标
○ 输入：yarn grunt build:css默认运行指定目标（css）
○ 通过this.target和this.data读取目标健和值

● 插件使用
○ grunt提供很多插件可以使用，
○ 插件需要安装相应的模块，如：yarn add grunt-contrib-clean

  grunt.initConfig({
        // 配置目标
      clean:{
          app:'app/*.js'
      }
    })
    //加载模块
    grunt.loadNpmTasks('grunt-contrib-clean')

○ 运行yarn grunt clean即可运行插件，该插件表示清除app文件下的js文件

● 常用插件
○ sass插件
■ 安装：yarn add grunt-sass sass --dev

const sass = require("sass")

module.exports = grunt =>{
  grunt.initConfig({
      // 配置目标
    clean:{
        app:'app/*.js'
    },
    //配置sass
    sass:{
        options:{
            //表示转换要依赖的工具，这里使用sass官方提供的转换工具
          implementation:sass
        },
        main:{
            files:{
              //   表示转化的文件，前者转换后的目标，后者要转换的文件
              'dist/index.css':'sass/index.scss'
            }
        }
    }
  })
  //加载插件
  grunt.loadNpmTasks('grunt-contrib-clean')
  grunt.loadNpmTasks('grunt-sass')
} 

 ■ yarn grunt sass启动即可

○ babel插件
■ 通过它将es6语法转换为环境支持的es5语法
■ 安装插件和babel：yarn add grunt-babel @babel/core @babel/preset-env --dev
■ 安装多插件注册模块：yarn add load-grunt-tasks --dev

  babel:{
          options:{
            //添加babel的预设
            presets:['@babel/preset-env']
          },
          main:{
              files:{
                  //
                  'dist/js/index.js':'js/index.js'
              }
          }
      }

○ 文件监视插件
■ 安装:yarn add grunt-contrib-watch
■ 配置监听的选项

const sass = require("sass")
const loadGruntTasks = require("load-grunt-tasks")

module.exports = grunt =>{
   grunt.initConfig({
       // 配置目标
     clean:{
         app:'app/*.js'
     },
     //配置sass
     sass:{
         options:{
             //表示转换要依赖的工具，这里使用sass官方提供的转换工具
           implementation:sass
         },
         main:{
             files:{
               //   表示转化的文件，前者转换后的目标，后者要转换的文件
               'dist/index.css':'sass/index.scss'
             }
         }
     },
     babel:{
         options:{
           //添加babel的预设
           presets:['@babel/preset-env']
         },
         main:{
             files:{
                 //
                 'dist/js/index.js':'js/index.js'
             }
         }
     },
     watch:{
         js:{
             //监视的文件
             files:['js/*.js'],
           //文件改变执行的目标
               tasks:['babel']
         },
         css:{
             files:['sass/*.scss'],
             tasks:['sass']
         }
     }
   })
   //自动加载所有插件
  loadGruntTasks(grunt)
  grunt.registerTask('default',['sass','babel','watch'])
}
   ```