添加多个输入/输出目录
Grunt Add multiple input/output directories
我正在使用grunt-babel
将我的react-jsx
文件转换为.js
。
我打算为此写一个grunt任务。目前,我有以下
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一个数组,但它抱怨以下错误:
警告:路径必须是字符串。收到('./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的动态grunt任务
相关文章:
- 使用JS从选择和文本输入中捕获值,并将输出返回到HTML
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 如何使用Javascript使用给定的输入创建输出表
- 输入到输出不会改变结果中的单词
- 节点.js加密输入/输出类型
- 想要从输入字段中输出确切的值
- 在javascript中测量websockets数据输入/输出的大小
- 整数 + 2x 单选按钮设置输入 --> 输出
- 我有一个mysql的输入文本字段.那么,如何通过ajax从数据库中输出json表呢
- 从输入中读取并将其内容作为输出进行管道传输
- 如何通过JavaScript将二进制(输入)转换为字符串(输出)
- 如何将文本输出到不是't输入不同颜色的文本
- 用于提示输入和输出的JavaScript按字母顺序排序
- 输出输入的字符串10次JavaScript
- 用户在数字上输入金额,然后输出最高数字javascript
- 接收输入数字,直到用户输入零.然后输出最高.JavaScript
- 修改输入中的数组,然后返回输出
- 如何添加单选按钮和复选框将选择输入到一起以形成JavaScript输出
- 这两种数组排序算法是否会为任何输入产生不同的输出
- 输入文本,带假路径,输出输入文本