GruntGrunt的生态系统非常庞大，而且一直在增长。通过大量的插件选择，您可以轻松地使用Grunt实现任何自动化。如果找不到自己需要的插件，自己创建一个Grunt插件，发布到npm上Grunt基本使用yarnaddgruntyarnadd安装后，创建一个gruntfile.js文件，这是grunt的入口该文件用于定义一些需要Grunt自动执行的字符。需要导出一个函数。该函数接收一个grunt的形式参数，并提供一些API示例，可以在创建任务时使用，如下所示：console.log('hellogrunt')//hellogrunt})grunt.registerTask('bar',"des",()=>{//yarngruntbar执行console.log("anothertask")//anothertask})//grunt.registerTask('default',"des",()=>{//默认的导出命令是default,yarngrunt你可以执行//console.log("anothertask")//})grunt.registerTask("default",["foo","bar"])//将同时执行foo任务和bar任务//grunt。registerTask("async-task",()=>{//setTimeout(()=>{//console.log("asynctask...")//异步任务，这里不会有输出//},1000);//})grunt.registerTask("async-task",function(){constdone=this.async()//grunt默认支持同步函数，如果需要异步操作，需要一个this。async()方法得到一个一个异步操作setTimeout(()=>{console.log("asynctask.")done()//执行异步函数，标记完成},1000);})}标记任务失败grunt.registerTask("bad",()=>{console.log("badworking")returnfalse//返回false，并将任务标记为失败})grunt.registerTask('foo',()=>{console.log('hellogrunt')})grunt.registerTask('bar',"des",()=>{console.log("另一个任务")})grunt.registerTask("default",["foo","bad","bar"])//bar不会执行，也可以加上--force继续执行任务yarngrunt--force异步任务标记任务失败grunt.registerTask("async-task",function(){constdone=this.async()setTimeout(()=>{console.log("asynctask.")done(false)//执行异步函数，flagfalse任务失败},1000);})配置方法grunt有一个用于添加配置选项的api，initConfiggrunt.initConfig({foo:'bar'//foo是任务名称})grunt.registerTask("foo",()=>{console.log(grunt.config('foo'))//打印栏})grunt.initConfig({foo:{bar:123}})grunt.registerTask("foo",()=>{console.log(grunt.config('foo.bar'))//print123})多目标任务可以理解为一个子任务grunt.initConfig({build:{//为构建任务添加两个targetcss:"1",js:'2'}})grunt.registerMultiTask('build',function(){console.log('buildtask')})运行以冒号分隔的命令之一build:cssgrunt.initConfig({build:{//为构建任务添加两个目标options:{//任务配置选项foo:'bar'},css:{options:{foo:'baz'//下面的配置选项会覆盖上面的配置选项}},js:'2'}})grunt.registerMultiTask('build',function(){console.log(this.options())//获取任务的配置选项console.log(`target:${this.target},data:${this.data}`)})插件使用插件步骤安装插件，引入插件，根据插件文档使用插件示例，使用grunt-contrib-clean插件grunt.initConfig({干净:{温度:'emp/app.js',//可以执行任务名或者通配一些文件//temp:'temp/*.txt'//清除所有后缀为txt的文件//temp:"temp/**"/清空/temp下的所有文件}})//比如清空temp目录下的app.jsgrunt.loadNpmTasks('grunt-contrib-clean')//grunt插件的命令格式大部分都是grunt-contrib-***,loadNpmTasks在监控js和scss文件变化的基本情况下加载constsass=require('sass')constloadGruntTasks=require('load-grunt-tasks')grunt.initConfig({sass:{//yarnaddgrunt-sassoptions:{sourceMap:true,implementation:sass},main:{files:{'dist/css/main.css':"src/scss/mian.scss"//目标路径和源路径分别}}},babel:{//编译es6options:{sourceMap:true,presets:['@babel/preset-env']},main:{files:{'dist/js/app.js':"src/js/app.js"}}},watch:{//grunt-contrib-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'])//使用默认，确保sass,babel先编译，再监听
