Gulp V4 need advanced sourcemap settings

As of new Gulp v4 I can get rid of gulp-sourcemaps plugin. As far as I know Gulp v4 uses its own sourcemap. I refactored my project to use Gulp v4 sourcemap, however I am missing advanced settings in sourcemap. I have following project structure:

├── dist
│   ├── app.bot.js
│   ├── app.bot.js.map
│   └── authorize
│       ├── authorize.js
│       └── authorize.js.map
├── gulpfile.js
├── package.json
├── package-lock.json
├── src
│   ├── app.bot.ts
│   └── authorize
│       └── authorize.ts
└── tsconfig.json

As you can see after typescript compilation all files that were in src/*.ts goes into dist/*.js. Path from generated *.map file to original *.ts file is incorect. It is correct only for one nested level. I need correct path for debug in VSCode. E.g. path from app.bot.js.map to app.bot.ts is correct:

"sources":["../src/app.bot.ts"]

E.g. path from authorize.js.map to authorize.ts is invalid:

"sources":["../src/authorize/authorize.ts"]

With gulp-sourcemaps plugin I managed to do correct path as following:

const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const tsProject = ts.createProject('tsconfig.json');
const outputDir = './dist';

gulp.task('build', () => tsProject.src()
  .pipe(sourcemaps.init({ loadMaps: true }))
  .pipe(tsProject())
  .js.pipe(sourcemaps.write('./', {
    includeContent: false,
    sourceRoot: '.'
  })).pipe(gulp.dest(outputDir))
);

With Gulp v4 sourcemap I can not do above example, right now I have this (but it does not help):

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');
const outputDir = './dist';

function build() {
  return gulp.src('./src/**/*.ts', { sourcemaps: true })
  .pipe(tsProject()).js
  .pipe(gulp.dest(outputDir, { sourcemaps: '.' }))
}

Is there any possibility to setup advanced settings for Gulp v4 sourcemap (so it will generate correct sourcemap path)?

[3cp]

Please reopen this issue. It’s not about TS. You can reproduce the issue with babel too.

In fact, you can reproduce the issue without any transpiling step. It’s a gulp issue.

https://github.com/3cp/gulp-sm-demo

gulp.src('src/**/*.js', {sourcemaps: true})
  .pipe(gulp.dest('dist', {sourcemaps: '.'}));

In this tiny demo, there are two files in src/folder: src/index.js and src/foo/index.js.

Because of the extra folder under src/, the compiled dist/foo/index.js.map is incorrect in the context without sourceRoot.

{
  "version":3,
  "names":[],
  "mappings":""
  ,"sources":["foo/index.js"],
  "sourcesContent":["module.exports = \"Hello Foo\";\n"],
  "file":"foo/index.js"
}

For an app that uses this npm module, it thinks:

• the source for dist/index.js is at path dist/index.js. (not src/index.js, but not a big issue)
• the source for dist/foo/index.js is at path dist/foo/foo/index.js. (incorrect duplicated folder structure)

This can be fixed by using gulp-sourcemaps:

https://github.com/3cp/gulp-sm-demo/tree/gulp-sourcemaps

gulp.src('src/**/*.js', {sourcemaps: true})
    .pipe(gulpSourcemaps.write('.', {
      sourceRoot: '../src/'
    }))
    .pipe(gulp.dest('dist'));

gulp-sourcemaps smartly does

1. add "sourceRoot": "../src/" to dist/index.js.map, so the source path will becomes src/index.js.
2. add "sourceRoot": "../../src/" (note it smartly added extra “…” to match deeper folder) to dist/foo/index.js.map, so the source path will becomes src/foo/index.js.

So the default gulp v4 sourceMap offering is incorrect in term of source path. But this can be fixed in gulp v4 gracefully because the sourceMap writing is handled by gulp.dest, it can compare the dest location with original source location, then smartly mutate sourceMap "sources" field or add "sourceRoot" field.

I can try to make a PR if this makes sense.

[sttk]

@3cp Thanks for your good reproduction codes. I’m trying to solve this issue.