grunt使用

Grunt

工作基于临时文件，磁盘读写，构建速度慢，插件生态完善

默认同步执行任务，异步任务需应用回调函数标识任务完成

鼻祖，但不咋用啦！！！！！！！！！！

yarn add grunt

code gruntfile.js

基本使用

gruntfile.js

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的对象类型的形参
// grunt 对象中提供一些创建任务时会用到的 API

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

  grunt.registerTask('bar', () => {
    console.log('other task')
  })

  // // default 是默认任务名称
  // // 通过 grunt 执行时可以省略
  // grunt.registerTask('default', () => {
  //   console.log('default task')
  // })

  // 第二个参数可以指定此任务的映射任务，
  // 这样执行 default 就相当于执行对应的任务
  // 这里映射的任务会按顺序依次执行，不会同步执行
  grunt.registerTask('default', ['foo', 'bar'])

  // 也可以在任务函数中执行其他任务
  grunt.registerTask('run-other', () => {
    // foo 和 bar 会在当前任务执行完成过后自动依次执行
    grunt.task.run('foo', 'bar')
    console.log('current task runing~')
  })

  // 默认 grunt 采用同步模式编码
  // 如果需要异步可以使用 this.async() 方法创建回调函数
  // grunt.registerTask('async-task', () => {
  //   setTimeout(() => {
  //     console.log('async task working~')
  //   }, 1000)
  // })

  // 由于函数体中需要使用 this，所以这里不能使用箭头函数
  grunt.registerTask('async-task', function () {
    const done = this.async()
    setTimeout(() => {
      console.log('async task working~')
      done()
    }, 1000)
  })
}

• 任务函数执行过程中如果返回 false， 则意味着此任务执行失败

•    grunt.registerTask('bad', () => {
        
      console.log('bad working~')
        
      return false
        
     })
        
    yarn grunt xxx --force      强制执行所有任务
  

• 异步函数中标记当前任务执行失败的方式是为回调函数指定一个 false 的实参

  grunt.registerTask('bad-async', function () {
      const done = this.async()
      setTimeout(() => {
        console.log('bad-async')
        done(false)             //false标记任务失败
      }, 1000)
    })
  

Grunt配置选项方法

• registerTask

• initConfig

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

多目标任务 registerMultiTask

• 多目标模式，可以让任务根据配置形成多个子任务

• 应用initConfig配置，方便

 // 多目标任务
    grunt.initConfig({
        build: {
            options: {      //任务配置选项
                foo: 'baz' 
            },
            css: {
                options: {      //任务配置将覆盖 baz
                    foo: 'poop' 
                    },
            },
            js: '1'
        }
    })

    grunt.registerMultiTask('build', function(){
        console.log(this.options());
        console.log(`target: ${this.target}, data: ${this.data}`)
    })
}


//result
Running "build:css" (build) task
{ foo: 'poop' }
target: css, data: [object Object]

Running "build:js" (build) task   
{ foo: 'baz' }
target: js, data: 1

Done.

常用插件

• grunt-contrib-clean 清除插件

  yarn add grunt-contrib-clean
  
  //配置
  grunt.initConfig({
          clean: {
              temp: 'temp/**'   // 通配所有文件夹
          }
      })
  
  grunt.loadNpmTasks('grunt-contrib-clean');     //加载任务
  
  yarn grunt clean   执行清除
  

• grunt-sass

  yarn add grunt-sass  sass  --dev
  

• grunt-babel

  yarn add grunt-babel @babel/core @babel/preset-env  --dev
  

• load-grunt-tasks 加载所有的grunt插件中的任务，减少grunt.loadNpmTasks使用

  yarn add load-grunt-tasks --dev
  

• grunt-contrib-watch 自动监听编译

  yarn add grunt-contrib-watch   --dev
  

•   
    const sass = require('sass')
    const loadGruntTasks = require('load-grunt-tasks')
    
    module.exports = grunt => {
      grunt.initConfig({
        sass: {
          options: {
            sourceMap: true,
            implementation: sass
          },
          main: {
            files: {
              'dist/css/main.css': 'src/scss/main.scss'
            }
          }
        },
        babel: {
          options: {
            sourceMap: true,
            presets: ['@babel/preset-env']
          },
          main: {
            files: {
              'dist/js/app.js': 'src/js/app.js'
            }
          }
        },
        watch: {
          js: {
            files: ['src/js/*.js'],
            tasks: ['babel']      //文件改变后需要执行的任务
          },
          css: {
            files: ['src/scss/*.scss'],
            tasks: ['sass']
          }
        }
      })
    
      // grunt.loadNpmTasks('grunt-sass')
      loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
    
      grunt.registerTask('default', ['sass', 'babel', 'watch'])
    }