使用Grunt需要在项目根目录创建一个gruntfile.js文件，这个文件是Grunt的入口文件，用于定义一些需要Grunt自动执行的任务；文件中需要导出一个，这个函数接收一个grunt对象，通过这个对象的API可以创建Grunt的执行任务
通过grunt.registerTask可以注册执行的任务
module.exports = grunt => {
grunt.registerTask('first', () => {
console.log('firtst task')
})
}
// 命令行执行 yarn 会执行node_modules里面grunt的命令 后面接的是注册的任务
yarn grunt first
registerTask 第一个参数是任务名称，第二参数如果是字符串的话就会是这个任务的任务描述
如果任务的名称为default，将会作为默认，yarn grunt 时就会执行default任务，用default来映射其他任务，就是registerTask第二个参数传入一个数组，数组里面是其他要执行任务的字符串名称
grunt.registerTask('default', ['first', 'two', 'three']
// 会按顺序执行这些任务
Grunt中执行异步任务，需要在任务回调用this.async返回来标识异步结束
grunt.registerTask('async-task', function() {
const done = this.done()
setTiemout(() => {
console.log('111')
// done来标识异步结束
done()
}, 1000)
})
通过在registerTask任务回调中return false 标识这个任务失败，如果在一系列任务中有一个任务标识失败，它后面的任务不会再执行，异步任务标记失败就在done传false
grunt.registerTask('first', () => { console.log('first'); return false })
grunt.registerTask('two', () => { console.log('two') })
grunt.registerTask('default', ['first', 'two'])
// 因为first任务return false 所以不会执行two的任务
// 异步任务 done(false) 标识失败
grunt.registerTask('bad-async', function() {
const done = this.async()
setTimeout(() => {
console.log('1')
done(false)
}, 1000)
})
Grunt配置
通过grunt.initConfig可以配置一些任务的参数
```
grunt.initConfig({
foo: 'task',
bar: {
name: '123'
}
})
grunt.registerTask('fitst-foo', () => {
console.log(grunt.config('foo'))
console.log(grunt.config('bar.name'))
console.log(grunt.config('bar').name)
})
```
grunt.registerMultiTask可以通过配置参数让一个任务形成多个子任务
```
grunt.initConfig({
build: {
// build里面任务都有的通用参数
options: {
name: 'tom'
},
taskOne: {
// 只在当前任务的参数
options: {
taskAge: 20,
name: 'jack' // 会覆盖同名通用参数
}
},
taskTwo: 'taskTwo'
}
})
grunt.registerMultiTask('build', function() {
// 拿到同名的配置
console.log(this.options())
// this.target 是配置的key data 是对应的值
console.log(`target ${this.target} data ${this.data}`) })
```
Grunt插件使用
-
安装Grunt的插件，可以在Grunt网上找插件的名称
-
通过grunt.loadNpmTask把这个插件引入进来
-
在initConfig中配置插件的参数（一般插件是多个子任务形式）
-
在执行这个插件的任务
grunt.initConfig({ clean: { // 清理temp下面的文件 temp: 'temp/**' } }) grunt.loadNpmTasks('grunt-contrib-clean')
// 命令行执行 yarn grunt clean
Grunt使用插件
const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
grunt.initConfig({
sass: {
options: {
implementation: sass
}, main: {
files: {
// 输出文件路径: 源文件路径
'dist/css/main.css': 'src/sass/main.sass'
}
}
}, babel: {
options: {
presets: ['@babel/preset-env']
}, main: {
files: {
'dist/js/app.js': 'src/js/main.js'
}
}
}, watch: {
js: {
files: ['src/js/*.js'],
tasks: ['babel']
}, css: {
files: ['src/sass/*.sass'], tasks: ['sass']
}
}
})
// grunt.loadNpmTasks('grunt-sass')
loadGruntTasks(grunt)
// 自动加载所有grunt插件
grunt.registerTask('default', ['sass', 'babel', 'watch'])
}
Grunt一个例子
