combining sourcemaps over two gulp tasks yields hard to read maps

gulp-sourcemaps version: 1.6.0 & 2.1.1

I have the following Gulp tasks:

gulp.task('compile-client-scripts', () => {
    return gulp.src(["!src/client/scripts/client.js", "src/client/scripts/**/*.js"])
        .pipe(sourcemaps.init())
        .pipe(babel({moduleIds: true}))
        .pipe(sourcemaps.write("."))
        .pipe(print())
        .pipe(gulp.dest("src/client/lib"));
});

gulp.task('concat-compiled-client-scripts', ['compile-client-scripts'], () => {
    return gulp.src("src/client/lib/**/*.js")
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat("client.js"))
        .pipe(sourcemaps.write("."))
        .pipe(print())
        .pipe(gulp.dest("src/client/scripts"));
});

The final sourcemap map to the right places in code, but it generates a hard-to-read structure in the browser’s (both FF and Chrome) devtools.

Do I have to specify another option to fix this or is what I want just not possible?

Edit: What I want to achieve as result:

The following Gulp task (Basically both above combined) generates the result below:

gulp.task('debug-client-scripts', () => {
    return gulp.src(["!src/client/scripts/client.js", "src/client/scripts/**/*.js"])
        .pipe(sourcemaps.init())
        .pipe(babel({moduleIds: true}))
        .pipe(concat("client.js"))
        .pipe(sourcemaps.write("."))
        .pipe(print())
        .pipe(gulp.dest("src/client/scripts"));
});

[nmccready]

@plamens @Nimelrian I think this has to deal with more of how your using gulp. gulp-sourcemaps and gulp are doing exact what you are telling them to do in you example.

The main issue is that when you run the task compile-source-scripts it keeps the folder integrity in the destination. Then you run gulp again on the source destination thus doubling the folder hierarchy. The simple solution is to flatten the files in the compile-source-scripts task.

example.tar

Code:

var gulp = require('gulp');
var flatten = require('gulp-flatten');
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var destFileOptions = {mode: "755"};

function getTsCompilerOptions() {
   return {
      allowJs: true,
      noEmitOnError: true,
      target: "ES5"
   };
}

gulp.task('compileTypescript', function() {
   return gulp.src('views/**/*.ts')
         .pipe(sourcemaps.init())
         .pipe(typescript(getTsCompilerOptions()))
         .pipe(sourcemaps.write('.'))
         .pipe(flatten())// <------------ KEY to your problem
         .pipe(gulp.dest('transpiled-typescript', destFileOptions));
});

gulp.task('concatenateJavascript', ['compileTypescript'], function() {
   return gulp.src('transpiled-typescript/**/*.js')
         .pipe(sourcemaps.init({loadMaps: true}))
         .pipe(concat('index.js'))
         .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest('dest', destFileOptions));
});

gulp.task('default', ['concatenateJavascript']);

[plamens]

I also observed that with gulp-sourcemaps 2.1.1. The problem is that paths in the properties of the generated sourceMap are relative to the base of the project, just like gulp-sourcemaps docs say.

For example: if the file ./subdir/main.ts is transpiled, the output source map will have the following property: “sources”:[“subdir/main.ts”]

When the next build task inits a sourcemap with loadMaps: true and loads this file, it will think that the sources property is relative to the sourceMap, so it will just append it to the path to the sourceMap. This happens at https://github.com/floridoo/gulp-sourcemaps/blob/master/src/init.js#L86 Thus, a part of the path will be duplicated and the sourceMap from the output of the second build task will have: “sources”:[“subdir/subdir/main.ts”]

Here is an example project with 2 simple build tasks, one transpiles a typescript file and the other does a gulp-concat with just this file: example-project.zip