Grunt
Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个 Grunt 插件，然后将其发布到 npm 上吧
Grunt基本使用
yarn add grunt
yarn add安装之后，创建一个gruntfile.js文件，这是grunt的入口文件，用于定义一些需要Grunt自动执行的人物，需要导出一个函数，此函数接收一个grunt的形参，内部提供一些创建任务时可以用到的API
例子如下:
module.exports = grunt => {
grunt.registerTask('foo', () => { // yarn grunt foo 执行
console.log('hello grunt') // hello grunt
})grunt.registerTask('bar', "des", () => { // yarn grunt bar 执行
console.log("another task") // another task
})// grunt.registerTask('default',"des",()=>{// 默认导出命令为default，yarn grunt就可以执行
//console.log("another task")
// })
grunt.registerTask("default", ["foo", "bar"]) // 会一次执行foo任务和bar任务// grunt.registerTask("async-task",()=>{
//setTimeout(() => {
//console.log("async task ...")// 异步任务，这里不会有输出
//}, 1000);
// })grunt.registerTask("async-task", function () {
const done = this.async() // grunt默认支持同步函数，如果需要异步操作，需要一个this.async（）方法得到一个异步操作
setTimeout(() => {
console.log("async task. ")
done() // 执行异步函数，标记完成
}, 1000);
})
}标记任务失败
grunt.registerTask("bad", () => {
console.log("bad working")
return false // 返回false,，标记任务失败
})grunt.registerTask('foo', () => {
console.log('hello grunt')
})grunt.registerTask('bar', "des", () => {
console.log("another task")
})grunt.registerTask("default", ["foo", "bad", "bar"]) // bar不会执行
文章图片
也可以在命令中加入
--force继续执行任务yarn grunt --force
文章图片
异步任务中标记任务失败
grunt.registerTask("async-task", function () {
const done = this.async()
setTimeout(() => {
console.log("async task. ")
done(false) // 执行异步函数，标记false任务失败
}, 1000);
})配置方法 【退出历史舞台的Grunt基本了解】grunt有一个添加配置选项的api，
initConfiggrunt.initConfig({
foo: 'bar' // foo为任务名
})
grunt.registerTask("foo", () => {
console.log(grunt.config('foo'))// 打印bar
})grunt.initConfig({
foo: {
bar: 123
}
})
grunt.registerTask("foo", () => {
console.log(grunt.config('foo.bar')) // 打印123
})多目标任务 可以理解为子任务
grunt.initConfig({
build: { // 为build任务添加两个目标
css: "1",
js: '2'
}
})grunt.registerMultiTask('build', function () {
console.log('build task')
})
文章图片
运行其中一个命令中用冒号隔开
build:css
文章图片
grunt.initConfig({
build: { // 为build任务添加两个目标
options: { // 任务配置选项
foo: 'bar'
},
css: {
options: {
foo: 'baz' // 下面的配置选项会覆盖上面的配置选项
}
},
js: '2'
}
})grunt.registerMultiTask('build', function () {
console.log(this.options()) // 拿到任务的配置选项
console.log(`target:${this.target},data:${this.data}`)
})
文章图片
插件 使用插件步骤，安装插件，引入插件，根据插件文档使用插件
例子,使用
grunt-contrib-clean插件grunt.initConfig({
clean:{
temp:'temp/app.js', // 可以执行任务名或者使用通配符通配一些文件
// temp:'temp/*.txt' // 后缀为txt的全部清除
// temp:"temp/**" // temp下文件全部清除
}
})
// 例如清除temp目录下的app.js
grunt.loadNpmTasks('grunt-contrib-clean') // grunt插件命令格式大多数都是grunt-contrib-***,loadNpmTasks加载进来一个监听js,scss文件变化的基础案例
const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
grunt.initConfig({
sass: { //yarn add grunt-sass
options: {
sourceMap: true,
implementation: sass
},
main: {
files: {
'dist/css/main.css': "src/scss/mian.scss" // 分别为目标路径和源路径
}
}
},
babel: {// 编译es6
options: {
sourceMap: true,
presets: [
'@babel/preset-env'
]
},
main: {
files: {
'dist/js/app.js': "src/js/app.js"
}
}
},
watch: { // grunt-contrib-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']) // 使用default, 确保sass,babel先编译，再监听
