Grunt 的使用

安装

yarn add grunt

使用

基本使用

在项目根目录添加 gruntfile.js ，这是 grunt 项目的入口文件。

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的对象类型的形参
// grunt 对象中提供一些创建任务时会用到的 API
module.exports = grunt => {
  // 调用命令： yarn grunt foo
  grunt.registerTask('foo', 'a sample task', () => {
    console.log('hello grunt')
  })
  // 调用命令： yarn grunt bar
  grunt.registerTask('bar', () => {
    console.log('other task')
  })
}

如果定义的任务名为 default ，那将作为默认任务执行，输入命令行时无需带上任务名。

// 调用： yarn grunt 
grunt.registerTask('default', () => {
    console.log('default task')
 })

 defalut 任务可以执行其他任务。

// 第二个参数可以指定此任务的映射任务，
  // 这样执行 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() 方法创建回调函数。

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

通过 return false 可以标记为任务失败。异步任务则需要在回调函数传入 false

 grunt.registerTask('bad', () => {
    console.log('bad working ~')
    return false
  })
// 这里执行到bad的时候失败，后面的bar会失败，如果要继续执行，可以在命令后加上 --force
grunt.registerTask('default', ['foo','bad', 'bar'])
// 异步失败任务
grunt.registerTask('bad-async', function () {
    const done = this.async()
    setTimeout(() => {
      console.log('bad async task~')
      done(false)
    }, 1000)
  })

配置选项

initConfig 是 grunt 的配置选项方法。

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

多目标任务

module.exports = grunt => {
  // 多任务必须有一个同名的配置选项
  grunt.initConfig({
    build: {
      options: {       // options 会作为配置选项而不是 target 出现
            foo: 'bar'
      }
      css: {
          options: {       // target 中的 options 会覆盖任务中的 options
            foo: 'bar'
          }
        },   // 单独运行命令：yarn grunt build:css
      js: '2'      
    }
  })
  // 多任务模式下，可以让任务根据配置形成多个子任务
  grunt.registerMultiTask('build', function() {
    console.info(this.options())  // 获取任务的配置选项
    console.info(`target: ${this.target}, data: ${this.data}`) //通过target获取到任务目标，data获取到数据
  })
}

插件

插件是 grunt 的核心。

module.exports = grunt => {
  grunt.initConfig({
    // clean插件的配置选项
    clean: {
      temp_1: 'temp/*.js',   // 清除temp文件夹的所有js文件
      temp: 'temp/**'        // 清除temp文件夹下的所有文件
    }
  })
  // 清除文件插件
  grunt.loadNpmTasks('grunt-contrib-clean')
}

const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
  grunt.initConfig({
    // 编译sass插件配置选项
    sass: {
      options: {
        sourceMap: true,   //生成sourceMap
        implementation: sass //指定处理sass编译的模块
      },
      main: {
        files: {
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    },
    // 编译 js 的插件配置选项
    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'])
}