之前在开篇我们提到过，Grunt是一个老牌的自动化构建工具。那边本章就是从配置以及案例分析的角度去使用Grunt。
配置文件
gruntfile.js是Grunt的入口文件，需要放在项目的根目录。用于定义一些需要Grunt自动执行的任务。
文件内需要导出一个函数，函数接收一个grunt的形参，内部提供一些创建任务时可以用到的API
module.exports = grunt => {
grunt.registerTask("foo", () => {
console.log("hello foo")
})
grunt.registerTask("bar","任务描述", () => {
console.log("hello bar")
})
grunt.registerTask("default",["foo", "bar"])
}
可以使用yarn grunt <任务名>的方式执行任务，假如任务名为default则可以省略任务名。
由于Grunt默认执行的是同步任务，如果任务直接使用
grunt.registerTask("async-task", () => {
setTimeout(() => {
console.log("async-task")
},1000)
})
会发现不会执行内部的回调
如果想要执行异步任务需要使用内部的 this.async()
grunt.registerTask("async-task", function() {
const done = this.async()
setTimeout(() => {
console.log("async-task")
done()
},1000)
})
标记任务失败
只需要在任务中 return false 即可
grunt.registerTask("bad", () => {
console.log("hello bad")
return false
})
grunt.registerTask("default",["foo", "bad","bar"])
对于一个任务数组，假如失败任务后面的任务将不会执行，认识如果我们在执行命令后面增加--force，如：yarn grunt default --force则会全部执行，但是会在错误的任务后面报错。
yarn grunt default --force
//返回结果
Running "foo" task
hello foo
Running "bad" task
hello bad
Warning: Task "bad" failed. Used --force, continuing.
Running "bar" task
hello bar
而对于异步任务想要标记失败只需要done(false)即可
配置选项
module.exports = grunt => {
grunt.initConfig({
foo: "bar"
})
grunt.registerTask("foo", () => {
console.log(grunt.config("foo"))
})
}
多目标任务
多目标模式，可以让任务根据配置行成多个子任务
module.exports = grunt => {
grunt.initConfig({
build: { //必须为对象
options: {
foo: "bar" // 内部配置选项
},
css: "css",
js: "js"
}
})
grunt.registerMultiTask("build", function() {
console.log(this.options())
console.log(`target: ${this.target}, data: ${this.data}`)
})
}
运行多目标任务必须需要目标对象
build可以一起执行也可以分开执行yarn grunt build || yarn grunt build:css
可以再目标对象中配置，配置项options，在子目标也可以配置，并且会覆盖相同的值。读options的值的时候可以用this.options()这个方法获取。
插件的使用
-
install执行插件 - 使用
loadNpmTasks加载插件 - 给插件配置子目标
module.exports = grunt => {
grunt.initConfig({
clean: {
temp: "temp/app.js"
}
})
grunt.loadNpmTasks("grunt-contrib-clean")
}
常用插件
grunt-sass
// yarn add grunt-sass sass
const sass = require("sass")
module.exports = grunt => {
grunt.initConfig({
sass: {
options: {
sourceMap: true,
implementation: sass
//等等诸多配置项
},
main: {
files: {
"dist/css/main.css": "scss/main.scss" // output / origin
},
}
}
})
grunt.loadNpmTasks("grunt-sass")
}
-
yarn add load-grunt-tasks用来避免因为任务过多导致频繁 执行loadNpmTasks -
grunt-babel
yarn add grunt-babel @babel/core @babel/preset-env --dev
babel: {
options: {
presets: ["@babel/preset-env"]
},
main: {
files: {
"dist/js/app.js": "js/app.js" // output : orgin
}
}
}
-
grunt-contrib-watch
yarn add grunt-contrib-watch --dev
watch: {
js: {
files: ["js/*.js"],
tasks: ['babel']
},
css: {
files: ["scss/*.scss"],
tasks: ["sass"]
}
}
由于watch是只有文件变更的时候才执行所以需要我们最开始的时候先执行一个任务
grunt.registerTask("default",["sass", "babel","watch"])
自此我们Grunt基本功能就大致了解了，其他无非就是功能的扩展，因为现在新建的项目极少使用Grunt，所以我们只需要了解使用方式，能够对老项目的配置项读懂即可。
