![](/img/trans.png)
[英]change cssmin and uglify output directories using usemin and grunt
[英]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/test/jsx/common
为./react_demo/static/react/components
。
现在,在将来的应用程序中,我们可以有多个文件夹,每个文件夹都有自己的一组JSX文件,这些文件将进入不同的目标文件夹。
我们可以有以下文件夹:
现在,如何指定多个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)文件来注册一些快捷方式和变量,以使您的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());};
对于您的方案,您可以在此处更改一些功能并完成它。
希望对您有所帮助。
有关更多信息,请阅读: babel动态咕ba声任务
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.