Can't run debugger on vscode for typescript after gulp tasks, debugger runs uncompiled code

Question

Okay the problem is before moving to gulp debugger was working perfectly. Here what is problem I have tsconfig.json file with following configs

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": false,
    "sourceMap": true,
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types/", "./src/modules/@types/**/"],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src"],
  "exclude": ["./src/modules/@types"]
}

vscode debugger task was npm: build which basically runs "tsc" command. But for some other cases I needed to add gulp file and stared to compile ts with gulp (including sourcemaps etc.) But when vscode debugger start to run it try to run node ./src/server.ts instead of ./dist/server.js file. and this happens when build task is gulp. with tsc command it still works perfectly. does gulp file need to return something or any other configurations to force vscode debugger to run ./dist/server.js?

gulpfile is here

const gulp = require("gulp")
const babel = require("gulp-babel")
var ts = require("gulp-typescript")
var sourcemaps = require('gulp-sourcemaps');


const tsProject = ts.createProject("tsconfig.json")
gulp.task("tsc", () => 
  tsProject
    .src()
    .pipe(tsProject())
    .pipe(gulp.dest("dist"))
)

gulp.task("sourcemaps", () =>
  gulp.src("dist/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("dist"))
)

gulp.task("resolve:alias", () => 
  gulp.src("dist/**/*.js")
    .pipe(
      babel({
        plugins: [
          [
            "babel-plugin-module-resolver",
            {
              alias: {
                "@": "./dist",
              },
            },
          ],
        ],
      })
    )
    .pipe(gulp.dest("dist"))
)

module.exports.default = gulp.series("tsc", "resolve:alias", "sourcemaps")

I tried other strategies like running tsc separately. but even removing all other task and just running gulp tsc task also fail however standard npx tsc pass

Farhad Farhad · Accepted Answer · 2020-10-23T16:39:16

Okay I solved the problem. I was searching the solution in the wrong place.

Problem: Gulp removes sourcemaps when compiling ts files. I added custom source generator plugin but it was also generating wrong sourcemaps with missing mappings.

Solution: I checked the differences with actual sourcemaps generated by tsc. So I updated my soucemap plugins options as following.

gulp.task("sourcemaps", () =>
  gulp
    .src("dist/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.identityMap())
    .pipe(
      sourcemaps.mapSources(function (sourcePath) {
        return "../src/" + sourcePath.replace(/\.js$/, ".ts")
      })
    )
    .pipe(sourcemaps.write(".", { includeContent: false, sourceRoot: "" }))
    .pipe(gulp.dest("dist"))
)

I had to replace js extensions with ts extensions, because, I need to call babel plugin on generated js files and then generate sourcemaps. Now it works

Can't run debugger on vscode for typescript after gulp tasks, debugger runs uncompiled code

1 Answers