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監視文件變化