Grunt Add multiple input/output directories

Question

I am using grunt-babel to transform my react-jsx files into .js .

I am planning to write a grunt task for this. Currently, I have below

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

};

In my above task what I am trying to do is, I am transforming all my JSX files present in folder ./react_demo/test/jsx/common into ./react_demo/static/react/components .

Now, in my application in future we can have multiple folder each having there own-set of JSX files which will be going into different destination folders.

We can have folders like:

• /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

Now, how can I specify multiple src/dest directories and map them together? I tried giving an array to src/dest but it complained with below error:

Warning: Path must be a string. Received [ './react_demo/cartridge/scripts/jsx/common' ] Use --force to continue.

Answer 1

As far as I know you will have to specify a new babel target for each new destination:

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

};

Answer 2

Few days back, I have faced this problem.You can achieve it by using config file.

write a configuration file (Eg : main-folder/grunt/config.js) file to register some shortcut, variables to make your grunt tasks more dynamic.

Example:

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

And import this config in each task with : var config = require('../config');

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

for your scenario, you can change some functionality here and get it done.

I hope this help.

for more info read this: dynamic grunt task with babel