基本使用
-
yarn init --yes
初始化package.json文件 -
yarn add grunt
添加grunt 模块 - 创建gruntfile.js 作为Grunt的入口文件
执行指定任务
yarn grunt foo
执行默认任务yarn grunt
默认任务列表按照顺序执行(包括异步任务)
// Grunt的入口文件
// 用于定义一些需要Grunt自动执行的任务
// 需要导出一个函数
// 此函数接收一个grunt的形参,内部提供一些创建任务时可以用到的API
module.exports = grunt => {
// yarn grunt foo
grunt.registerTask('foo', () => {
console.log('hello foo')
})
// yarn grunt --help
grunt.registerTask('bar', '任务描述', () => {
console.log('hello bar')
})
// yarn grunt
// grunt.registerTask('default', () => {
// console.log('hello default')
// })
grunt.registerTask('default', ['async', 'foo', 'bar'])
grunt.registerTask('async', function() {
const done = this.async()
setTimeout(() => {
console.log('hello async')
done()
}, 100)
})
}
标记失败
- 普通任务通过
return false
来实现 - 异步任务给一个false 的实参去标记失败
执行任务列表,如果前一个任务失败,后面的任务将不会被执行
可以通过 yarn grunt default --force 设置为强制执行
grunt.registerTask('foo', () => {
console.log('hello foo')
return false
})
grunt.registerTask('async', function() {
const done = this.async()
setTimeout(() => {
console.log('hello async')
done(false)
}, 100)
})
配置方法
- 使用initConfig配置默认值
- 使用config获取值
- 支持字符串内
·
的使用方式foo.bar
grunt.initConfig({
foo: {
bar:123
}
})
grunt.registerTask('foo',()=>{
console.log(grunt.config('foo')) // 获取配置中的foo的值
})
// yarn grunt foo
grunt.registerTask('foo', () => {
console.log('hello', grunt.config('foo'))
console.log('hello', grunt.config('foo.bar'))
return false
})
多目标任务
- 需要在initConfig中配置对应多任务,这里是
build
-
build
里面的每个属性 都是一个目标任务 - 属性的值就是
this.data
-
options
作为任务的配置选项出现
module.exports = grunt => {
grunt.initConfig({
build: {
options: {
msg: 'task options'
},
foo: {
options: {
msg: 'foo target options'
}
},
bar: () => {
console.log('bar')
return 'bar'
},
name: 'name'
}
})
// yarn grunt foo
grunt.registerMultiTask('build', function () {
if (this.data instanceof Function) {
console.log(`target: ${this.target} data:${this.data()}`)
} else {
console.log(`target: ${this.target} data:${this.data}`)
}
// foo的this.data.options 和 this.options()是一致的
console.log(this.options())
})
}
插件(clean)
- 安装
yarn add grunt-contrib-clean
- 通过
loadNpmTasks
导入插件 - 配置插件任务
clean
, 子任务可以安装自己需求命名, 这里叫tmp
- 运行
yarn grunt clean
使用插件
// 多目标模式,可以让任务根据配置形成多个子任务
module.exports = grunt => {
grunt.initConfig({
clean: {
tmp: 'tmp/**'
// tmp: 'tmp/*.js'
// tmp: 'tmp/123.js'
}
})
grunt.loadNpmTasks('grunt-contrib-clean')
}
插件(sass)
- 安装
yarn add grunt-sass sass --dev
, grunt-sass是插件,sass是环境。 - 通过
loadNpmTasks
导入插件 - 配置插件任务
sass
, 子任务可以安装自己需求命名, 这里叫tmp
- 运行
yarn grunt sass
使用插件
const sass = require('sass')
// sass插件
module.exports = grunt => {
grunt.initConfig({
sass: {
options:{
implementation: sass,
sourceMap: true
},
tmp: {
files: {
'dist/css/main.css': 'src/scss/main.scss'
}
}
}
})
grunt.loadNpmTasks('grunt-sass')
}
插件(babel)
- 安装
yarn add grunt-babel @babel/core --dev @babel/preset-env --dev
, grunt-babel是插件,@babel/core是核心模块,@babel/preset-env`是预设(就是把ES6特性打了个包)。 -
yarn add load-grunt-tasks --dev
,通过loadGruntTasks
导入插件,自动加载所有的 grunt 插件中的任务。 - 配置插件任务
babel
, 子任务可以安装自己需求命名, 这里叫tmp
- 运行
yarn grunt babel
使用插件
const loadGruntTasks = require('load-grunt-tasks')
// babel插件
module.exports = grunt => {
grunt.initConfig({
babel: {
options:{
sourceMap: true,
presets: ['@babel/preset-env']
},
tmp: {
files: {
'dist/js/app.js': 'src/js/app.js'
}
}
}
})
loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
}
插件(watch)
- 安装
yarn add grunt-contrib-watch --dev
- 通过
loadGruntTasks
导入插件,自动加载所有的 grunt 插件中的任务。 - 配置插件任务
watch
,因为watch第一次不执行,只有变化了才执行。这里使用default包装下grunt.registerTask('default', ['sass', 'babel', 'watch'])
- 这里运行
yarn grunt
使用插件
watch: {
js: {
files: ['src/js/*.js'],
tasks: ['babel']
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass']
}
}
// *****
grunt.registerTask('default', ['sass', 'babel', 'watch'])
网友评论