0

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/destdirectories 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.

4

2 回答 2

1

几天前，我遇到了这个问题。您可以使用配置文件来实现。

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

例子：

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

对于您的方案，您可以在此处更改一些功能并完成它。

我希望这会有所帮助。

欲了解更多信息，请阅读： 动态 grunt 任务与 babel

于 2018-01-25T10:34:53.717 回答
1

据我所知，您必须为每个新目的地指定一个新的 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

};
于 2016-10-13T11:37:48.360 回答