Grunt简介

1、Grunt的基本使用

1、yarn init
2、yarn add grunt
3、code 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)
    })
  }
  

4、yarn grunt 或者 npx grunt
5、yarn grunt async-task

2、Grunt标记任务失败

1、如果构建任务逻辑代码中发生错误，如需要的文件找不到。此时就可以将这个任务标记为一个失败的任务。可通过在函数体中return false来实现
2、如果是异步任务，需要给异步回调函数指定一个false的实参标记这个任务失败

module.exports = grunt => {
    // 任务函数执行过程中如果返回 false
    // 则意味着此任务执行失败
    grunt.registerTask('bad', () => {
      console.log('bad working~')
      return false
    })
  
    grunt.registerTask('foo', () => {
      console.log('foo working~')
    })
  
    grunt.registerTask('bar', () => {
      console.log('bar working~')
    })
  
    // 如果一个任务列表中的某个任务执行失败
    // 则后续任务默认不会运行
    // 除非 grunt 运行时指定 --force 参数强制执行
    grunt.registerTask('default', ['foo', 'bad', 'bar'])
  
    // 异步函数中标记当前任务执行失败的方式是为回调函数指定一个 false 的实参
    grunt.registerTask('bad-async', function () {
      const done = this.async()
      setTimeout(() => {
        console.log('async task working~')
        done(false)
      }, 1000)
    })
  }

3、Grunt的配置方法

1、initConfig 用于去添加配置选项的API

module.exports = grunt => {
    // grunt.initConfig({
    //     foo: 'bar' // key与任务名称保持一致
    // })
    // grunt.registerTask('foo',()=>{
    //     console.log(grunt.config('foo')) // 获取这个配置的属性值
    // })

  }

2、运行yarn grunt foo 或者npx grunt foo

4、Grunt多目标任务

registerMultiTask
可以单独运行子任务yarn grunt：子任务

module.exports = grunt => {
    // 多目标模式，可以让任务根据配置形成多个子任务
    // grunt.initConfig({
    //   build: {
    //     foo: 100,
    //     bar: '456'
    //   }
    // })
    // //   定义多目标任务 
    // grunt.registerMultiTask('build', function () {
    //   console.log(`task: build, target: ${this.target}, data: ${this.data}`)
    // })
  
    grunt.initConfig({
      build: {
        options: { // 作为任务的配置选项出现
          msg: 'task options'
        },
        foo: {
          options: {
            msg: 'foo target options',
          }
        },
        bar: '456'
      }
    })
  
    grunt.registerMultiTask('build', function () {
      console.log(this.options()) 
    })
  }

5、Grunt插件的使用

插件机制是grunt的核心
npm安装插件 gruntfile中载入插件提供的任务，然后根据插件文档完成相关的配置选项
1、grunt-contrib-clean用来自动清除项目开发中产生的一些临时文件 yarn add grunt-contrib-clean
2、grunt.loadNpmTasks方法加载这个插件提供的一些任务
3、initConfig为任务添加一些配置选项

module.exports = grunt => {
  grunt.initConfig({
    clean: {
      // temp: 'temp/bar.txt'
      // temp: 'temp/*.txt'
      temp: 'temp/**'
    }
  })
  grunt.loadNpmTasks('grunt-contrib-clean')
}

4、grunt插件命名规范grunt-contrib-taskname
5、yarn grunt clean

6、Grunt插件及总结

1、grunt-sass 。grunt官方也提供了一个sass模块，但是那个模块需要本机安装sass环境，使用起来很不方便。本次用的是npm模块。内部会通过npm的形式去依赖sass，对机器没有环境要求。grunt-sass需要有一个sass模块的支持。这儿使用的sass官方提供的npm模块，就叫做sass。
yarn add grunt-sass sass --dev。
2、grunt-sass是一个多目标任务。需要initConfig去为sass任务配置一些目标,main需要制定输出路径：输入路径
3、yarn grunt sass

implementation 用来指定在grunt-sass中用来指定用哪一个模块处理sass的编译

const sass = require('sass')
module.exports = grunt => {
 grunt.initConfig({
   sass: {
    options: {
      sourceMap: true,
      implementation: sass
    },
    main: {
      files: {
        'dist/css/main.css': 'src/scss/main.scss' // 输出路径文件：输入路径文件
      }
    }
  }
 })
grunt.loadNpmTasks('grunt-sass')
}

4、编译es6新语法
yarn add grunt-babel @babel/core @babel/preset-env --dev
这时需要在loadNpmTasks中添加grunt-babel中提供的任务，随着gruntfile越来越复杂。这个loadNpmTasks操作越来越多。可以使用load-grunt-tasks来减少loadNpmTasks的使用
yarn add load-grunt-tasks --dev
自动加载所有的 grunt 插件中的任务
babel: ES最新特性的转换。支持转换部分特性
preset把一系列特性打了一个包形成了一个叫preset,这儿使用的preset叫env，会根据最新的es特性去做对应的转换
yarn grunt babel

文件修改完成自动编译
yarn add grunt-contrib-watch --dev
sass 语法规范不被接受，后来出的新的语法规范，用scss作为扩展名
yarn grunt watch
就会监视，文件变化时才会执行babel编译

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: { // ES最新特性的转换。支持转换部分特性
    options: {
      sourceMap: true,
      // 把一系列特性打了一个包形成了一个叫preset,这儿使用的preset叫env，会根据最新的es特性去做对应的转换
      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'])
}

yarn grunt