Grunt複数の入出力ディレクトリを追加

Question

grunt-babelを使用して、react-jsxファイルを.jsに変換しています。

私はこれに対して不平等な作業を書くつもりです。現在、私は./react_demo/static/react/componentsにフォルダ./react_demo/test/jsx/commonに存在するすべての私のJSXファイルを変換しています、私は何をしようとしていることである私の上記のタスクで

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

}; 

の下に持っています。

私の将来のアプリケーションでは、それぞれ異なる宛先フォルダに入るJSXファイルの独自のセットを持つ複数のフォルダを持つことができます。

私たちのようなフォルダを持つことができます。

• /react_demo /テスト/ JSX /共通 - >/react_demo /静的/反応/コンポーネントを
• /反応/テスト/ JSX/COMMON1 - > /反応/静的/反応/ components1
• /react2 /テスト/ JSX/COMMON2 - >/react2 /静的/反応/ components2
今

、どのように私は、複数のsrc/destのディレクトリを指定することができますし、それらを一緒にマッピングしますか？私はSRC/DESTに配列を与えてみましたが、それは以下のエラーで訴え：

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

Answer 1

限り、私はあなたがそれぞれの新しい目的地のための新しいバベルのターゲットを指定する必要があります知っている：

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

私はこの問題に直面しています。あなたはconfigファイルを使ってこの問題を解決できます。

いくつかのショートカットや変数を登録するための設定ファイル（例：main-folder/grunt/config.js）を作成して、不快な作業をよりダイナミックにする。

例：

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

各タスクにこの設定をインポートすると：VARコンフィグ=必要とする（ '../設定'）。

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

、あなたはここで、いくつかの機能を変更することができ、それが成し遂げます。

このヘルプが欲しいです。

詳細はこの記事を読む： dynamic grunt task with babel