自动化构建--grunt(代码片段)

Grunt怎么使用？

Grunt算是最早的一款前端构建系统了，Grunt的插件生态非常的完善，构建过程基于临时文件实现，构建过程稍微会慢一点

安装Grunt

yarn add grunt

安装完成后在项目根目录添加Grunt的入口文件gruntfile.js

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

Grunt 任务注册

Grunt 使用接口registerTask来注册任务

module.exports=grunt=>
  // 注册任务
  grunt.registerTask(\'foo\',()=>
    console.log(\'hello grunt~\')
  )
  // 注册默认任务
  grunt.registerTask(\'default\',()=>
    console.log(\'default task~\')
  )

执行grunt任务

yarn grunt bar

执行结果如下：

默认任务不需要指定任务名

yarn grunt

执行结果如下:

Grunt的Default任务

一般注册default任务来映射其它任务

// default的任务的第二个参数传入一个数组，数组中是要执行的其它的任务，执行default任务会依次执行数组中的任务
grunt.registerTask(\'default\',[\'foo\',\'bar\'])

此时运行default任务结果如下图所示：

Grunt 的异步任务

Grunt默认使用同步模式，要使用异步操作，需要在任务中使用this.async() 来得到一个回调函数，并在异步操作完成后执行此回调，不然异步操作不会得到执行，此任务的回调函数不能是箭头函数

grunt.registerTask(\'async-task\', function()
  const done=this.async()
    setTimeout(()=>
        console.log(\'async task working...\')
        done()

    ,1000)
)

Grunt标记任务失败

任务失败时，需要在任务中返回false来标记任务失败，执行多个任务时，当有任务失败了，后续任务就不会再执行了，可以根据提示添加force参数来让任务保持继续执行

grunt.registerTask(\'badtask\',()=>
    console.log(\'badtask working\')
    return false
)
grunt.registerTask(\'default\',[\'foo\',\'badtask\',\'bar\'])

运行default失败的任务结果如下：

从图中可以看到，foo任务执行了，但bar任务没有任务

尝试添加--force强制不打断执行：

此时bar任务也执行了

Grunt 标记异步任务的失败

异步任务不能像同步任务一样直接返回false，需要在this.async()中传入参数false

grunt.registerTask(\'async-badtask\',function()
    const done=this.async()
    setTimeout(() => 
        console.log(\'async bad\')
        done(false)
    , 1000);
)

Grunt 的配置选项

Grunt 提供一个API叫initConfig，用来添加一些配置选项，选项名一般与任务名保持一致，选项值可以是值，也可以是对象，具体看代码：

grunt.initConfig(
    foo:\'bar\',
    objtest:
        prop1:1232,
        objprop:
            foo:\'111\'
        
    
)
grunt.registerTask(\'objtest\',()=>
    // 配置选项为对象时可以通过"."语法拿到子属性
    console.log(grunt.config(\'objtest.objprop.foo\'))
)
grunt.registerTask(\'foo\',()=>
    console.log(grunt.config(\'foo\'))
)
grunt.registerTask(\'default\',[\'foo\',\'objtest\'])
)

运行结果如下：

Grunt 的多目标任务

Grunt注册的任务可以根据配置形成多个子任务

为任务配置多个目标：

grunt.initConfig(
    // 为multiTask任务配置的多个目标
    multiTask:
        css:\'1\',
        js:\'2\'
    
)

注册多目标任务：

//使用registerMultiTask注册多目标任务
grunt.registerMultiTask(\'multiTask\',function()
    // 可以通过this.target拿到目标的名称，this.data拿到目标的数据
    console.log(`target:$this.target,data:$this.data`)
)

multiTask 运行结果：

从上图可以看到多个目标都被执行了，当我们只想执行指定目标时，通过冒号+目标名来执行指定的目标

注意：多目标任务不会对配置选项中的options进行执行，如下所示：

// initConfig中的配置选项
grunt.initConfig(
    multiTask:
        options:
            foo:\'bar\',
        ,
        css:\'1\',
        js:\'2\'
    
)
grunt.registerMultiTask(\'multiTask\',function()
    console.log(`target:$this.target,data:$this.data`)
)

执行multiTask任务结果:

可以看出，options中的配置没有对应的执行输出

配置的目标中也有options时，会覆盖外层的options的对应属性

grunt.initConfig(
  multiTask:
      options:
          foo:\'bar\',
      ,
      css:
          options:
              // 当执行css目标时，此foo会覆盖外层foo
              foo:\'baz\'
          
      ,
      js:\'2\'
  
)
grunt.registerMultiTask(\'multiTask\',function()
  console.log(this.options())
)

执行multiTask结果：

css对应输出foo:baz
js对应输出foo:bar

grunt-contrib-clean插件 删除文件

• Grunt的插件多数都是以grunt-contrib-的形式来名称的，比如grunt-contrib-clean就等于是clean任务，执行的时候只需要执行类似yarn grunt clean就可以了，同时它的配置选项名也只需要写clean就可以了

• grunt-contrib-clean插件用于清除文件，其是一个多目标任务，需要对其配置多目标选项,不然会执行会产生错误提示

• 安装grunt-contrib-clean插件

yarn add grunt-contrib-clean

• 加载任务

grunt.initConfig(
  clean:
      // 表示将会删除temp目录中的app.js文件
      // 除了单文件外，还可以批量删除文件，
      // 使用temp/*.txt来删除temp目录下以所有的txt文件
      // 使用temp/** 来删除temp目录以及temp里面的所有内容
      temp:\'temp/app.js\'
  
)
grunt.loadNpmTasks(\'grunt-contrib-clean\')

• 执行任务

yarn grunt clean

grunt-sass插件处理sass

• 安装依赖

yarn add grunt-sass sass --dev

• 配置目标

const sass=require(\'sass\')
module.exports=grunt=>
  grunt.initConfig(
    sass:
      options:
        sourceMap:true,
        implementation:sass
        // 更多选项可以到grunt-sass的官方仓库查看
      ,
       main:
        files:
          \'dist/css/main.css\':\'src/scss/main.scss\'
        
      
    
  )
  grunt.loadNpmTasks(\'grunt-sass\')

load-grunt-tasks 插件自动加载

加载grunt插件的npm包，我们可以使用grunt.loadNpmTasks(\'插件名\')来加载插件，当插件很多时，其实不需要每个插件都手动加载一遍，可以使用grunt提供的loadGruntTasks方法，这个方法可以自动的为我们加载需要的插件

只需要将grunt对象传入作为参数就可以了：loadGruntTasks(grunt)

grunt-babel 编译es6语法

• 安装依赖

yarn add grunt-babel @babel/core @babel/preset-env --dev

• 配置目标

const loadGruntTasks=require(\'load-grunt-tasks\')
module.exports=grunt=>
  grunt.initConfig(
    babel:
        options:
            sourceMap:true,
            presets:[\'@babel/preset-env\']
        ,
        main:
            files:
                \'dist/js/app.js\':\'src/js/app.js\'
            
        
    
  )
  loadGruntTasks(grunt) //自动加载所有的grunt插件中的任务

grunt-contrib-watch监听文件变化

• 安装：yarn add grunt-contrib-watch --dev

• 目标配置

const loadGruntTasks=require(\'load-grunt-tasks\')
module.exports=grunt=>
  grunt.initConfig(
    watch:
      js:
          // 监听的文件
          files:[\'src/js/*.js\'],
          // 文件发生改变时需要执行的任务
          tasks:[\'babel\']
      ,
      css:
          // 监听的文件
          files:[\'src/scss/*.scss\'],
          // 文件发生改变时需要执行的任务
          tasks:[\'sass\']
      
    
  )
  loadGruntTasks(grunt) //自动加载所有的grunt插件中的任务
  // 因为watch任务只在目标文件发生变动时才会执行相关任务，若要一开始就执行相关任务，可以为相关任务做一个映射，使watch监听开始前就先执行一遍相关任务
  grunt.registerTask(\'default\',[\'sass\',\'babel\',\'watch\'])

运行yarn grunt就可以开启watch监听了