Grunt

基本使用

1. yarn init --yes 初始化package.json文件
2. yarn add grunt添加grunt 模块
3. 创建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)
    })
}

标记失败

1. 普通任务通过return false来实现
2. 异步任务给一个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)
    })

配置方法

1. 使用initConfig配置默认值
2. 使用config获取值
3. 支持字符串内·的使用方式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
    })

多目标任务

1. 需要在initConfig中配置对应多任务，这里是build
2. build里面的每个属性 都是一个目标任务
3. 属性的值就是this.data
4. 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)

1. 安装yarn add grunt-contrib-clean
2. 通过loadNpmTasks导入插件
3. 配置插件任务clean， 子任务可以安装自己需求命名， 这里叫tmp
4. 运行yarn grunt clean使用插件

// 多目标模式，可以让任务根据配置形成多个子任务
module.exports = grunt => {
    grunt.initConfig({
        clean: {
            tmp: 'tmp/**'
            // tmp: 'tmp/*.js'
            // tmp: 'tmp/123.js'
        }
      })
      grunt.loadNpmTasks('grunt-contrib-clean')
}

插件(sass)

1. 安装yarn add grunt-sass sass --dev， grunt-sass是插件，sass是环境。
2. 通过loadNpmTasks导入插件
3. 配置插件任务sass， 子任务可以安装自己需求命名， 这里叫tmp
4. 运行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)

1. 安装yarn add grunt-babel @babel/core --dev @babel/preset-env --dev， grunt-babel是插件，@babel/core是核心模块，@babel/preset-env`是预设(就是把ES6特性打了个包)。
2. yarn add load-grunt-tasks --dev,通过loadGruntTasks导入插件，自动加载所有的 grunt 插件中的任务。
3. 配置插件任务babel， 子任务可以安装自己需求命名， 这里叫tmp
4. 运行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)

1. 安装yarn add grunt-contrib-watch --dev
2. 通过loadGruntTasks导入插件，自动加载所有的 grunt 插件中的任务。
3. 配置插件任务watch，因为watch第一次不执行，只有变化了才执行。这里使用default包装下grunt.registerTask('default', ['sass', 'babel', 'watch'])
4. 这里运行yarn grunt使用插件

        watch: {
            js: {
              files: ['src/js/*.js'],
              tasks: ['babel']
            },
            css: {
              files: ['src/scss/*.scss'],
              tasks: ['sass']
            }
        }

// *****

grunt.registerTask('default', ['sass', 'babel', 'watch'])