I'm currently setting up Grunt to utilize ES6, aiming to transpile each component's JS file into its own designated folder.
Here is my current directory structure:
Components
└──footer
│ └──js
│ └──footer.jsx
└──header
│ └──js
│ └──header.jsx
└──slider
└──js
└──slider.jsx
My desired result is as follows:
Components
└──footer
│ └──js
│ │ └──footer.jsx
│ └──compiled
│ └──footer.js
└──header
│ └──js
│ │ └──header.jsx
│ └──compiled
│ └──header.js
└──slider
└──js
│ └──slider.jsx
└──compiled
└──slider.js
At the moment, my configuration looks like this:
babel: {
options: {
sourceMap: true,
presets: ['env']
},
dist: {
files: [{
expand: true,
cwd: "src/Components",
src: ["**/*.jsx"],
dest: 'compiled',
ext: '.js',
extDot: 'first'
}]
}
}
However, it currently consolidates all compiled files into a single common folder.
What adjustments should be made in order to generate compiled JS for each individual component directory?