How does gulp-sourcemaps retrieve ** matched path from src method

Question

I'm using gulp to build project, together with gulp-sourcemaps for generating sourcemaps.

I have several compnents like this:

public
 |-- src
      |-- comp1
      |     |-- c1-a.js
      |     |-- c1-b.js
      |
      |-- comp2
            |-- c2-a.js
            |-- c2-b.js

I'd like to build them into following strcture:

public
 |-- dist
 |    |-- comp1
 |    |     |-- c1-a.min.js
 |    |     |-- c1-a.min.js.map
 |    |     |-- c1-b.min.js
 |    |     |-- c1-b.min.js.map
 |    |
 |    |-- comp2
 |          |-- c2-a.min.js
 |          |-- c2-a.min.js.map
 |          |-- c2-b.min.js
 |          |-- c2-a.min.js.map
 |
 |-- src/

Currently my gulp task can generate files into correct path:

gulp.task('component', function() {
  gulp.src('./public/src/**/*.js', {base: './public/src'})
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: '/src/' // here's the problem
    }))
    .pipe(gulp.dest('./public/dist'))
})

but there are two problems:

1. the sourceRoot in map file is not correct: expecting "sourceRoot":"/src/comp1/" but the result is "sourceRoot":"/src/"

2. neither does sourceMappingURL in compressed file: expecting sourceMappingURL=c1-a.min.js.map but the result is sourceMappingURL=../../comp1/c1-a.min.js.map

How can I append the ** part to sourceRoot and fix sourceMappingURL?

Answer 1

Your sourceRoot is getting set as /src/ because that's what you told it here:

gulp.src('./public/src/**/*.js', {base: './public/src'})

You've set {base: './public/src'} so everything on down the line will treat paths relative to src, so that is the correct sourceRoot. But at the top of the mapping, it should have paths relative to those in the "sources":[...] part (e.g. "sources":["comp1/c1-a.min.js.map"]).

Nevertheless, if you really wanted to change the sourceRoot, you can do so using the sourceRoot option to gulp-sourcemaps, but then your sources would be wrong. However, gulp-sourcemaps version 2.0.0-alpha (which you'd have to explicitly request in your package.json since it's prerelease) also has a mapSources option to let you modify those too.

Similarly, you can use sourceMappingURLPrefix or sourceMappingURL to alter the sourceMappingURL. In the latter case, you'll get the full file object, so you can inspect e.g. cwd, base, etc. console.debug or Visual Studio Code can be a big help when debugging npm/gulp tasks! That article shows how to set breakpoints, inspect variables etc. which I've found very useful.