grunt

Grunt

Grunt安装 yarn add grunt
code gruntfile.js grunt的入口文件
yarn grunt 任务名执行nodemodules 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’) }

常用插件总结

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

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

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