Grunt

作者: JerrySi | 来源:发表于2021-12-26 16:29 被阅读0次

    基本使用

    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'])
    

    相关文章

      网友评论

          本文标题:Grunt

          本文链接:https://www.haomeiwen.com/subject/zidsqrtx.html