I have two gulp tasks: the first handles caching + babel + sourcemaps, the other one concatenates the translated files into one single JavaScript file + sourcemaps.
gulp.task('prepare:js', () => {
const babelOptions = {
"presets": [
[
"env",
{ "targets": { "browsers": ["firefox >= 24"]} }
]
]
}
return gulp.src('app/scripts')
.pipe(changed('.tmp/scripts'))
.pipe(sourcemaps.init())
.pipe(babel(babelOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
})
gulp.task('package:js', ['prepapre:js'], () => {
return gulp.src(['.tmp/scripts/*.js', '.tmp/scripts/**/*.js'])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(concat('app.bundle.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/scripts))
})
It almost works as I want. The remaining issue is with the sourcemaps. Indeed, it generates a single sourcemap with duplicate informations:
- One mapping between my original code (located in
app/scripts
) and the concatenated file thanks toloadMaps: true
(that's the one I want to keep) - Another mapping between the babelified code (located in
.tmp/scripts
) and the concatenated code (that's the one I want to get rid of).
The thing is, if I remove the instruction .pipe(sourcemaps.init({loadMaps: true}))
, the first sourcemaps will no longer be included.
I could also merge these two tasks but I would not be able to use gulp-changed
anymore (since any change to a file located in app/scripts
would trigger a concatenation and refresh the cache).
How can I get rid of the second mapping?