其他分享
首页 > 其他分享> > 自动化构建 -- Grunt

自动化构建 -- Grunt

作者:互联网

Grunt怎么使用?

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

安装Grunt

yarn add grunt

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

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插件 删除文件

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监听文件变化

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监听了

标签:执行,插件,grunt,--,任务,自动化,Grunt,foo
来源: https://www.cnblogs.com/MissSage/p/14899473.html