grunt-babel 配置多任务

grunt-babel 配置多任务

作为一个 grunt 党，其配置文件让我欲罢不能，而最近又在全面使用 ES6 的新特性，全面考察之后决定使用 grunt-babel 作为转换工具。在使用的过程中却碰到一些坑，比如不能直接使用多任务。个人在构建 grunt 的配置文件的时候，习惯针对各个任务建立任务，以便用最小的耗时去打包，比如：

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'
        }
    }
});

在配置 grunt-babel 的时候，却发现这种多任务却不能正常的执行。在查看官方文档之后，发现原来是 babel 下的没有 options 和 dist，这就导致了 grunt 会忽略整个 babel 任务，如：

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

我们需要将其转换成如下的格式才能正常加载配置并可以使用 babel:test 的子任务

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'
            }
        }
    }
});

虽然有点啰嗦，不过这样还是能够正常识别任务的，我也自己编写了个转换工具来生成这个配置，不过有个小问题就是 options 是各个子任务的集合

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);
    }
}