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