I am trying, using grunt and babel, to transpile all js6 files in a folder and end up with a concatenated single file (js5) with a working sourcemap to the original es6 files. However the sourcemapping does not work. My babel, concat settings below:
"babel": {
options: {
sourceMap : true
},
dist: {
files:[
{
expand: true,
cwd: 'wwwroot/js/src',
src: ['*.js'],
dest: 'tmp/js'
}]
}
},
concat: {
options: {
sourceMap: true
},
js: {
src: [
'tmp/js/*.js',
],
dest: 'wwwroot/js/app.js'
}
}
Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"
I am ending up with firstly a folder with a lot of js files and src maps(tmp directory). But concatinating them into one file messes up with source mapping completely.
Ideas? Also, can I somehow skip the making of temporary files and sort of just pipe the result into concat?
Reversing the order of task will make this much easier.First run the concat
task on the JS files. After that run babel
task on the single file created by concat
task previously with the following options
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
Here the script.js.map
file is the name of the source map file generated by concat
task. As inputSourceMap
option excepts a source map object , we pass it in using the grunt.file API's readJSON
method
The full Grunt file configuration would be:
concat: {
options: {
sourceMap: true
},
js: {
src: ['Modules/**/js/*.js'],
dest: 'script.js'
}
},
babel: {
dist: {
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
src: [
'script.js',
],
dest: 'app.js'
}
}
Example project: https://github.com/pra85/Grunt-Concat-Babel-Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With