自动化构建工具-grunt

1. grunt基本使用

• 首先准备一个空文件夹，yarn init -y
• yarn add grunt
• 根目录下新建 gruntfile.js
• 运行命令：yarn grunt foo/yarn grunt bar/yarn grunt(默认找default)

module.exports = grunt => {
   grunt.registerTask('foo', () => {
       console.log('aaa')
       // return false 标记任务失败
   })
   grunt.registerTask('bar', "任务描述", () => {
       console.log('带任务描述的任务')
   })
   grunt.registerTask('async-task', function() {
       let done = this.async()
       setTimeout(() => {
           console.log('tag', '完成了')
           done() // done(false)标记异步任务失败
       }, 1000)
   })
   grunt.registerTask('default', ['foo', 'bar', 'async-task'])
}

2. grunt的配置方式

• grunt除了有registerTask的方法，还有initConfig方法

module.exports = grunt => {
    grunt.initConfig({
        foo: {
            bar: 123
        }
    })
    grunt.registerTask('foo', () => {
        console.log('aaa')
        // return false 标记任务失败
    })
}

3. grunt多目标任务

• grunt还提供registerMultiTask方法
• 执行命令：yarn grunt build

module.exports = grunt => {
    grunt.initConfig({
        build: {
            options: {
                foo: 'bar'
            },
            css: { // 里面也加options的话，里面的会覆盖掉外面的,打印this便知

                options: {
                    foo: 'baz'
                }
            },
            js: '2'
        }
    })

    grunt.registerMultiTask('build', function() {
        console.log('tag', this)
    })
}

4. grunt插件使用

• 安装yarn add grunt-contrib-clean
  • 此插件作用：清除设定的文件（临时文件）
• gruntfile.js文件中添加以下代码运行yarn grunt clean可以清除temp下的文件（通配符*.js 代表扩展名js的文件 **代表清除temp下的所有文件）
• 运行命令：yarn grunt clean

module.exports = grunt => {
    grunt.initConfig({
        clean: {
            temp: 'temp/**'
        }
    })
    grunt.loadNpmTasks('grunt-contrib-clean')
}

5. grunt常用插件及总结

• 编译scss：
  • yarn add grunt-sass sass --dev

const sass = require('sass')
    module.exports = grunt => {
        grunt.initConfig({
            sass: {
                options: {
                    sourceMap: true,
                    implementation: sass
                },
            main: {
                files: {
                    'dist/css/main.css': 'src/scss/main.scss'
                }
            }
        }
    })
    grunt.loadNpmTasks('grunt-sass')
}

• 编译js:
  • yarn add grunt-babel @babel/core @babel/preset-env --dev
  • 为防止重复写多遍grunt.loadNpmTasks()，可利用一个插件yarn add load-grunt-tasks --dev
• 监听文件:
  • 插件： yarn add grunt-contrib-watch --dev
  • 执行命令：yarn grunt(此命令即可编译scss/js并实现监听这俩类型文件变化）

const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
    grunt.initConfig({
        sass: {
            options: {
                sourceMap: true,
                implementation: sass
            },
            main: {
            files: {
                'dist/css/main.css': 'src/scss/main.scss'
            }
        }
        },
        babel: {
            options: {
                sourceMap: true,
                presets: ['@babel/preset-env']
            },
            main: {
                files: {
                    'dist/js/app.js': 'src/js/app.js'
                }
            }
        },
        watch: {
            js: {
                files: ['src/js/*.js'],
                tasks: ['babel']
            },
            css: {
                files: ['src/scss/*.scss'],
                tasks: ['sass']
            }
        }
    })
    // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt)
    grunt.registerTask('default', ['sass', 'babel', 'watch'])
}