Grunt

60 阅读 0 评论 40 点赞

我是靠谱客的博主苗条冬日，最近开发中收集的这篇文章主要介绍Grunt，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述


// yarn add grunt --dev
//Grunt 的入口文件
// 用于定义一些需要Grunt自动执行的任务
// 需要导出一个函数
// 此函数接收一个grunt形参，内部提供一些创建任务时可以用到的API
module.exports = grunt => {
// 注册一个任务
grunt.registerTask('foo',()=>{
console.log('hello grunt');
})
//可以注册多个任务
grunt.registerTask('bar','任务描述',()=>{
console.log('other task');
})
//grunt里注册异步任务
grunt.registerTask('async-task',function(){
//需要通过this调用async方法
const done = this.async()
setTimeout(()=>{
console.log('async task working...');
//调用async方法的回调
done()
},1000)
})
//标记失败任务 通过return false来标记失败
grunt.registerTask('bad',()=>{
console.log('bad working...');
return false
})
//添加配置的API 配置需要压缩的文件路径
//配置项的键名和任务名要同名
grunt.initConfig({
faa: 'shit'
})
grunt.registerTask('faa',()=>{
console.log(grunt.config('faa'));
})
//一般在efault里面进行映射,运行yarn frunt时会一次执行foo bar 任务
//foo任务正常执行 bad执行失败 及其后面的任务无法执行
grunt.registerTask('default',['foo','faa','bad','bar'])
}

多目标模式


module.exports = grunt => {
grunt.initConfig({
//build下每一个键都会成为一个目标
//除了options,options下的配置信息会作为任务的配置选项出现
build:{
options:{
foo:'bar'
},
css:'1',
js:{
//在目标当中也可以添加options
//会覆盖build下面的options
options:{
foo:'baz'
},
name:'2'
}
}
})
//多目标模式，可以让任务根据配置形成多个子任务
//运行命令：yarn grunt build:css

//结果： target:css,data:'1'
grunt.registerMultiTask('build',function(){
//可以通过this获取options
console.log(this.options());
console.log(`target:${this.target},data:${this.data}`);
})
}

grunt插件的使用

// grunt 插件的使用
//以grunt-contrib-clean为例
//yarn add grunt-contrib-clean(自动清除项目开发中的临时文件)
//一般grunt插件命名规范:grunt-contrib-'任务名'
//1.npm下载插件
//2.loadNpmTasks加载插件
//3.initConfig为插件添加配置选项
module.exports = grunt => {
grunt.initConfig({
clean:{
// temp: 'temp/*.txt'
temp: 'temp/**' //表示删除temp下的所有内容
}
})
//加载插件
grunt.loadNpmTasks('grunt-contrib-clean')
}

常见插件的使用

// s常用插件的grunt下的基本使用
//安装插件 yarn add grunt-sass sass --dev
//安装babel
yarn add grunt-babel @babel/core @babel/preset-env --dev
//安装 yarn add load-grunt-tasks --dev减少loadNpmTasks的使用
const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
grunt.initConfig({
sass:{
options:{
sourceMap:true,
implementation: sass
},
main:{
files:{
//键是要输出的路径 值是原路径
'dist/css/main.css':'src/scss/main.scss'
}
}
},
babel:{
options:{
presets: ['@babel/preset-env']
},
main:{
files:{
'dist/js/app.js':'src/js/app.js'
}
}
},
// 配置保存自动构建 
//安装 yarn add grunt-contrib-watch --dev
// 执行 yarn grunt watch
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'])
}