How gulp -sourcemaps extracts ** a consistent path from src method

Question

I use gulp to create a project along with gulp -sourcemaps to generate source maps.

I have several such components:

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

I would like to build them in the 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 in the 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 the problem })) .pipe(gulp.dest('./public/dist')) }) 

but there are two problems:

• The sourceRoot file in the map file is incorrect: expecting "sourceRoot":"/src/comp1/" , but the result is "sourceRoot":"/src/"

• and not sourceMappingURL in the compressed file: expecting sourceMappingURL=c1-a.min.js.map , but the result is sourceMappingURL=../../comp1/c1-a.min.js.map

How to add part ** to sourceRoot and fix sourceMappingURL?

Answer 1

Your sourceRoot gets the value /src/ because you said it here:

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

You set {base: './public/src'} so that everyone on the line handles paths relative to src , so this is the correct sourceRoot . But at the top of the display, it should have paths relative to the elements in "sources":[...] (for example, "sources":["comp1/c1-a.min.js.map"] ).

However, if you really wanted to change sourceRoot, you can do this using the sourceRoot parameter for gulp -sourcemaps , but then your sources would be wrong. However, gulp -sourcemaps version 2.0.0-alpha (which you must explicitly request in package.json , as this is a preliminary release) also has a mapSources parameter mapSources that you can also change them.

Similarly, you can use sourceMappingURLPrefix or sourceMappingURL to change sourceMappingURL. In the latter case, you get the full file object so you can check for example. cwd , base , etc. console.debug or Visual Studio code can be of great help when debugging npm / gulp tasks! This article shows how to set breakpoints, view variables, etc., which I found very useful.