Grunt

Grunt

Grunt安装 yarn add grunt

code gruntfile.js grunt的入口文件

yarn grunt 任务名执行node_modules gruntcli命令

/**
* Grunt的入口文件
* 用于定义一些需要 Grunt 自动执行的任务
* 需要导出一个函数
* 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的 API
*/

module.exports = grunt => {
 grunt.registerTask('foo',()=>{//注册一个任务 任务发生自动执行函数 yarn grunt foo
   console.log('hello grunt');
 })
}

任务描述

  grunt.registerTask('bar','任务描述',()=>{ //‘任务描述’会出现在yarn grunt --help帮助信息中 
    console.log('other task~');
  })

默认任务

  // grunt.registerTask('default',()=>{
  //   console.log('default task~'); //默认任务 执行时可以不添加名称
  // })

  grunt.registerTask('default',['foo','bar']) //依次执行数组中的任务

异步任务

  grunt.registerTask('async-task',function(){
    const done = this.async()//得到一个回调函数，异步操作结束调用它，标识任务已经完成
    setTimeout(()=>{
      console.log("async task working");
      done()
    },1000)
  })

标记任务失败

  grunt.registerTask('bad',()=>{  //yarn grunt bad
    console.log('bad working~');
    return false  //标记任务失败,如果在任务列表中，它的失败会阻止后续任务运行
  })

  grunt.registerTask('good1',()=>{
    console.log('good1 working~');
  })
  
  grunt.registerTask('good2',()=>{
    console.log('good2 working~');
  })

  grunt.registerTask('default',['good1','bad','good2']) //good2内容不再输出

异步任务标记失败

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

配置选项API

  grunt.initConfig({ //接收一个对象，键与任务名称抱持一致，值任意类型数据
    baz:'我是value'
  })

  grunt.registerTask('baz',()=>{
    console.log(grunt.config('baz')) //获取配置，接收字符串参数，配置的名字
  })

配置项是对象

  grunt.initConfig({ 
    baz1:{
      bar:'我是value'
    }
  })

  grunt.registerTask('baz1',()=>{
    console.log(grunt.config('baz1.bar')) //如果是对象可以这样，当然也可以grunt.config('baz1').bar
  })

多目标任务

多目标任务配置项

  grunt.initConfig({
    'build':{
      options:{ //除了options都是任务目标，它会作为任务的配置选项出现，yarn grunt build并不会执行
        mcgee:"大家都是你好你好"
      }, 
      css:"1",//目标名称
      js:"2",
      ts:{ //目标中也可以添加目标的配置选项
        options:{
          mcgee:"我独有的，会覆盖对象中的options"
        }
      }
    }
  })

多目标任务实现，通过registerMultiTask

  //多目标模式，可以让任务根据配置形成多个子任务,需要通过initConfig配置不同目标
  grunt.registerMultiTask('build',function(){   //yarn grunt build || yarn grunt build:css运行指定的目标
    console.log(`target:${this.target},data:${this.data}`); //也就是配置目标名和值 target:css,data:1
    console.log(this.options()); //拿到对应配置选项 { mcgee: '你好你好' }
  })

插件的使用

npm安装插件

gruntfile中载入插件

根据插件添加配置选项

试插件 yarn add grunt-contrib-clean 大部分插件都是 yarn add grunt-contrib-xxx

module.exports = grunt=>{ //yarn grunt clean
  grunt.initConfig({
    clean:{
      temp:'temp/app.js',
      // temp:'temp/*.txt',
      // temp:'temp/**'  //包含temp文件夹的子目录和子目录所有文件
    }
  })
  grunt.loadNpmTasks('grunt-contrib-clean')
}

常用插件总结

1. yarn add grunt-sass sass --dev

const sass = require('sass')

module.exports = grunt=>{
  grunt.initConfig({
    sass:{
      options:{
        sourceMap:true,
        implementation:sass //Fatal error: The implementation option must be passed to the Sass task
      },
      main:{ //任务目标
        files:{
          'dist/css/main.css':'src/scss/main.scss'
        }
      }
    }
  })

  grunt.loadNpmTasks('grunt-sass')
}

使用yarn grunt sass

2. yarn add grunt-babel @bable/core @babel/preset-env --dev 核心模块，预设

yarn add load-grunt-tasks --dev解决每次都要引入一个loadNpmTasks的问题

const loadGruntTasks = require('load-grunt-tasks') //引入

module.exports = grunt=>{
  grunt.initConfig({
    babel:{
      options:{ //preset把需要转的特性打了个包 preset-evn根据最新的es6特性进行转换
        presets:['@babel/preset-env'],
        sourceMap:true
      },
      main:{
        files:{
          'dist/js/app.js':'src/js/app.js' //输出目录，输入目录
        }
      }
    }
  })

  // grunt.loadNpmTasks('grunt-contrib-clean')

  // grunt.loadNpmTasks('grunt-sass')
  
  // grunt.loadNpmTasks('grunt-babel')//引入load-grunt-tasks包解决每个插件都要引入一次的问题

  loadGruntTasks(grunt) //自动加载所有的grunt 插件中的任务
}

使用yarn grunt babel 编译es6

3. yarn add grunt-contrib-watch 自动编译

   const loadGruntTasks = require('load-grunt-tasks')
   
   module.exports = grunt=>{
     grunt.initConfig({
    watch:{ //配置监视
      js:{
        files:['src/js/*.js'],
        tasks:['babel'] //监视到files文件内的内容改变，则执行对应插件
      },
      css:{
        files:['src/scss/*.scss'],
        tasks:['sass']
      }
    }
     })
   
     loadGruntTasks(grunt) //自动加载所有的grunt 插件中的任务
   
     grunt.registerTask('default',['sass','babel','watch']) //注册默认任务，在监视前先执行一次
   }

   使用yarn grunt watch监视文件变化