Gulp: Gulp V4 need advanced sourcemap settings

[volodalexey]

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)?

[phated]

tsProject subverts many of our conventions. We can't really help you if they break our sourcemap integration.

[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.

[phated]

@3cp it was never intended that gulp support the full set of gulp-sourcemaps options. Gulp just loads the initial sourcemaps and writes the final ones to disk—this is to avoid any filesystem calls within the middle of a pipeline. If you want extra features, you can reach for an @gulp-sourcemaps/... plugin, like https://github.com/gulp-sourcemaps/sources-content.

For your sourceRoot example, it looks like the gulp-sourcemaps team hasn't had the chance to implement a separate plugin for that yet. If you want to help, or just ask for it to be created, I'd suggest visiting https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/285

If you think there is a bug in gulp on how source paths are calculated, please open an issue (with a test case) at https://github.com/gulpjs/vinyl-sourcemap

[3cp]

Sure, I understand. I will do some study and try to open an issue on vinyl-sourcemap.

One thing I noticed, is that gulp-sourcemaps without explicit sourceRoot option behaves exactly like gulp v4 built-in sourceMap support. Both did not care about the duplicated source path segments.

I thought it probably makes more sense to get a correct default behaviour (for both gulp-sourcemaps and gulp v4 built-in). gulp v4 doesn't need to have any new features or new options to get this right, gulp.src and gulp.dest got enough information to make it right out of the box.

[phated]

@3cp vinyl-sourcemap was created using gulp-sourcemap code as a basis. If there was a bug in gulp-sourcemaps, it would be present in vinyl-sourcemap as well.