前端小白成长之15--grunt自动化构建基础了解

自动构建刷新

一.常用的自动化构建工具

Grunt Gulp FIS

常用的自动化构建工具

二.gruntfile.js

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

module.exports = grunt => {
  // grunt.initConfig() 用于为任务添加一些配置选项
  grunt.initConfig({
    // 键一般对应任务的名称
    // 值可以是任意类型的数据
    foo: {
      bar: 'baz'
    }
  })

  grunt.registerTask('foo', 'a sample task', () => {//运行直接yarn grunt foo就会执行这个任务
    console.log('hello grunt')
  })

  grunt.registerTask('bar', () => {//运行直接yarn grunt bar就会执行这个任务
   console.log(grunt.config('foo.bar'))
  })

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

  // 第二个参数可以指定此任务的映射任务，
  // 这样执行 default 就相当于执行对应的任务
  // 这里映射的任务会按顺序依次执行，不会同步执行
  grunt.registerTask('default', ['foo', 'bar'])//运行直接yarn grunt就会相继执行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)
  })

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

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

  // grunt.initConfig({
  //   build: {
  //     foo: 100,
  //     bar: '456'
  //   }
  // })

  // grunt.registerMultiTask('build', function () {
  //   console.log(`task: build, target: ${this.target}, data: ${this.data}`)
  // })//这里运行yarn grunt foo时，打印的target就是foo，data就是100

  grunt.initConfig({
    build: {
      options: {
        msg: 'task options'
      },
      foo: {
        options: {
          msg: 'foo target options'
        }
      },
      bar: {
        options: {
          msg: 'bar target options'
        }
      },
      noOptions: 123//没有走默认options
    }
  })

  grunt.registerMultiTask('build', function () {//options作为配置选项存在this.options可以拿到
    console.log(this.options())//yarn grunt build 打印结果如下
    // Running "build:foo"(build) task
    // { msg: 'foo target options' }

    // Running "build:bar"(build) task
    // { msg: 'bar target options' }

    // Running "build:noOptions"(build) task
    // { msg: 'task options' }
  // })

四.grunt插件使用

• 安装插件，比如（yarn add grunt-contrib-clean）
• 通过 grunt.loadNpmTasks把插件中提供的任务加载进来 ，比如
  grunt.loadNpmTasks('grunt-contrib-clean')
• 在initConfig配置中，为插件配置选项

    grunt.initConfig({
        clean: {
            // temp:'temp/**'
            temp: 'temp/*.txt'
        }
    })

五.常用的grunt插件

yarn add load-grunt-tasks --dev 自动加载所有grunt插件
yarn add grunt-sass sass --dev sass插件
yarn add grunt-babel @babel/core --dev babel插件
yarn add grunt-contrib-watch --dev 热更新

//运行yarn grunt sass 自动生成dist文件夹下面main.css和map文件
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'])
  }