Grunt-Babel configures multitasking

As a Grunt party, I can’t get enough of the configuration files, and recently decided to use Grunt-Babel as the conversion tool after looking at all the new features of ES6. But in the process of using some pits, such as can not directly use multitasking. When building a Grunt configuration file, individuals tend to create tasks for each task, so as to package with minimal time. For example:

grunt.initConfig({
    concat: {
        global: {
            src: [
                'src/js-global/**/*.js'
            ],
            dest: 'dest/js/global.js'
        }
    },
    
    uglify: {
        global: {
            src: '<%= concat.global.dest %>',
            dest: 'dest/js/global.min.js'
        }
    }
});

When we configured Grunt-Babel, we found that this kind of multitasking did not work properly. When we look at the documentation, we see that there is no options and dist in Babel, which causes Grunt to ignore the entire Babel task, such as:

grunt.initConfig({
    babel: {
        test: {
            options: {
                presets: [
                    'babel-preset-es2015'
                ]
            },
    
            files: {
                'dest/js/test.js': 'dest/js/test.es6.js'
            }
        }
    }
});

We need to convert it to the following format in order to load the configuration properly and use the Babel :test subtask

grunt.initConfig({
    babel: {
        options: {
            presets: [
                'babel-preset-es2015'
            ]
        },
        
        dist: {
            files: {
                'dest/js/test.js': 'dest/js/test.es6.js'
            }
        },
        
        test: {
            files: {
                'dest/js/test.js': 'dest/js/test.es6.js'
            }
        }
    }
});

It’s a bit verbose, but it’s still task recognition. I also wrote my own conversion tool to generate this configuration, but one small problem is that options is a collection of subtasks

const _ = require('lodash'); function transformBabelOptions(config) { if (_.has(config, 'babel')) { var babelOptions = _.reduce(config.babel, (memo, task, taskName) => { var opts = _.get(memo, 'options', {}), files = _.get(memo, 'dist.files', {}), taskOpts = _.get(task, 'options'), taskFiles = _.get(task, 'files'); _.set(memo, 'options', _.extend(opts, taskOpts)); _.set(memo, 'dist.files', _.extend(files, taskFiles)); return memo; }, {}); _.extend(config.babel, babelOptions); }}