Grunt添加多个输入/输出目录

我正在使用grunt-babel将我的react-jsx文件转换为.js文件。

我正在计划为此写一个咕task任务。 目前，我有下面

module.exports = function( grunt ) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig( {

        babel : {
            options : {
                plugins : ['transform-react-jsx'],
                presets: ['es2015', 'react']
            },
            client : {
                expand : true,
                cwd : './react_demo/test/jsx/common',
                src : ['*.jsx'],
                dest : './react_demo/static/react/components',
                ext : '.js'
            }
        }
    } );

    grunt.loadNpmTasks('grunt-babel');
    grunt.registerTask('default', ['babel:client']);

};

在我上面的任务中，我试图做的是，我将文件夹./react_demo/test/jsx/common所有JSX文件./react_demo/test/jsx/common为./react_demo/static/react/components 。

现在，在将来的应用程序中，我们可以拥有多个文件夹，每个文件夹都有自己的JSX文件集，这些文件将进入不同的目标文件夹。

我们可以拥有如下文件夹：

/ react_demo / test / jsx / common - > / react_demo / static / react / components

/ react / test / jsx / common1 - > / react / static / react / components1

/ react2 / test / jsx / common2 - > / react2 / static / react / components2

现在，我如何指定多个src/dest目录并将它们映射到一起？ 我尝试给src / dest一个数组，但它抱怨下面的错误：

警告：路径必须是字符串。 收到['./react_demo/cartridge/scripts/jsx/common']使用--force继续。

---

据我所知，你将不得不为每个新目的地指定一个新的babel目标：

module.exports = function( grunt ) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig( {

        babel : {
            options : {
                plugins : ['transform-react-jsx'],
                presets: ['es2015', 'react']
            },
            client : {
                expand : true,
                cwd : './react_demo/test/jsx/common',
                src : ['*.jsx'],
                dest : './react_demo/static/react/components',
                ext : '.js'
            },
            common1 : {//add more targets
                expand : true,
                cwd : './react/test/jsx/common1',
                src : ['*.jsx'],
                dest : './react/static/react/components1',
                ext : '.js'
            }//etc..

        }
    } );

    grunt.loadNpmTasks('grunt-babel');
    grunt.registerTask('default', ['babel:client','babel:common1']);//reg new targets

};

---

几天后，我遇到了这个问题。你可以通过使用配置文件来实现它。

写一个配置文件（例如：main-folder / grunt / config.js）文件来注册一些快捷方式，使变量更加动态。

例：

var demoConfig = { 
    'module1': 'script/module1',
    'module2': 'script/module2',
    'module3': 'script/module3' 
};
module.exports = demoConfig ;
}

并在每个任务中导入此配置：var config = require（'../ config'）;

在gruntfile.js中：

module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-task');
var getTasks = function() {
    var jsConfig = require('../config/demoConfig'),
        jsTasks = {};
    for (var key in jsConfig) {
        jsTasks[key] = {
            files: [{
                expand: true,
                cwd: './react_demo/test/jsx/' + jsConfig[key],
                src: '**/*.jsx',
                dest: './react_demo/static/react/' +jsConfig[key],
                ext: '.js'
            }]
        };
    }
    return jsTasks;
};
grunt.config('babel', getTasks());};

对于你的场景，你可以在这里改变一些功能并完成它。

我希望这个帮助。

欲了解更多信息，请阅读：与巴贝尔动态咕噜任务

链接地址: http://www.djcxy.com/p/52109.html

上一篇: Grunt Add multiple input/output directories

下一篇: Browserify working with grunt ReacjJS and yii2 vendor path