grunt-babel 配置多任务

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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 下的没有 optionsdist,这就导致了 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);
    }
}

脚本宝典总结

以上是脚本宝典为你收集整理的grunt-babel 配置多任务全部内容,希望文章能够帮你解决grunt-babel 配置多任务所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。