Grunt 添加多个 input/output 目录
Grunt Add multiple input/output directories
我正在使用 grunt-babel
将我的 react-jsx
文件转换为 .js
。
我打算为此编写一个繁琐的任务。目前,我有以下
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/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 一个数组,但它抱怨以下错误:
Warning: Path must be a string. Received [
'./react_demo/cartridge/scripts/jsx/common' ] Use --force to continue.
据我所知,您必须为每个新目的地指定一个新的 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
};
几天前,我遇到了这个problem.You可以通过使用配置文件来实现。
写一个配置文件(例如: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());};
对于您的场景,您可以在此处更改一些功能并完成它。
希望对您有所帮助。
有关更多信息,请阅读:
我正在使用 grunt-babel
将我的 react-jsx
文件转换为 .js
。
我打算为此编写一个繁琐的任务。目前,我有以下
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/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 一个数组,但它抱怨以下错误:
Warning: Path must be a string. Received [ './react_demo/cartridge/scripts/jsx/common' ] Use --force to continue.
据我所知,您必须为每个新目的地指定一个新的 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
};
几天前,我遇到了这个problem.You可以通过使用配置文件来实现。
写一个配置文件(例如: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());};
对于您的场景,您可以在此处更改一些功能并完成它。
希望对您有所帮助。
有关更多信息,请阅读: