Grunt 的简单使用

1. Grunt 的简单介绍

grunt 可以说是前端构建工具的鼻祖了，它的插件生态非常完善，用官方的话来说：grunt 的插件几乎可以自动化帮助你做任何你想做的事情。虽然 grunt 虽然强大，但是现在 grunt 基本已经退出历史舞台了。因为 grunt 的工作过程是基于临时文件实现的，所以它的构建速度相对较慢，例如你去使用 grunt 对 sass 文件的构建，我们一般先会对 sass 文件进行编译操作，再去添加一些私有属性的前缀，最后再去压缩代码。在这样的过程当中，grunt 的每一步都会有磁盘读写操作。比如在 sass 文件编译过后，它会将 sass 文件结果写入一个临时文件，然后下一个插件再去读取这个文件，如果你有一个超大型的项目，文件特别多的话，每处理一个文件都会进行磁盘读写操作，就会导致构建速度特别慢，因为你要频繁地进行 I/O 操作。
下面我们就来简单的学习一下 grunt

2. Grunt 的基本使用

我们创建一个文件，然后初始化 package.json，添加 grunt 模块

yarn init -y

yarn add grunt -D

然后在根目录创建一个 gruntfile.js 的文件, gruntfile.js 就是 grunt 的入口文件

• （1）我们就可以在 gruntfile.js 中使用 grunt 去处理一些任务

module.exports = grunt => {
   
    grunt.registerTask('foo', () => {
   
        console.log('hello grunt')
    })
}

然后我们在控制台执行以下命令

yarn grunt foo // 输出 hello grunt

这样 grunt 就会帮助我们执行 foo 任务

• （2）默认任务
  如果我们将 registerTask 的第一个参数设置为 default 那么它就是一个默认任务，我们就不用指定任务

grunt.registerTask('default', '任务描述', () => {
   
    console.log('default task')
})

然后我们在控制台执行以下命令

yarn grunt // 输出 default task

如果我们将 registerTask 第二个参数设置为数组，它就会执行多个任务

grunt.registerTask('default', ['foo', 'bar'])

• (3) 异步任务
  我们并不能直接在 registerTask 中执行异步任务，而是需要借助它内置的 async 函数

grunt.registerTask('async-task', function() {
   
    const done = this.async()

    setTimeout(() => {
   
        console.log('async task')
    }, 1000)
})

3. Grunt 标记任务失败

我们在实际开发中，如果有一个文件找不到了，我们就需要 grunt 将这个任务标记为失败任务

grunt.registerTask('bad',