Express Typescript Gulp in Visual Studio Code Debug

Question

I am trying to implement express/typescript/gulp app, it works, but I still can't get it to debug using source-maps.

Here is my setup

Gulp File

var gulp = require('gulp'),
    nodemon = require('gulp-nodemon'),
    livereload = require('gulp-livereload'),
    sourcemaps = require('gulp-sourcemaps'),
    gulpPlumber = require('gulp-plumber'),
    merge = require('merge2'),
    ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json');

gulp.task('typescript', function() {
   console.log('Compiling TypeScript');

    var tsResult = gulp.src(['src/**/*.ts']) 
        .pipe(gulpPlumber())
        .pipe(sourcemaps.init())
        .pipe(tsProject());

    // merge dts & js output streams...
    return merge([
        // type definitions
         tsResult.dts
            .pipe(gulp.dest("./src/")),
          // javascript
        tsResult.js
            //.pipe(sourcemaps.write(writeOptions))
            .pipe(gulp.dest('./src/'))
        ]);


});

gulp.task('serve', ['typescript'], function () {

    gulp.watch('./**/*.ts', ['typescript']);

    livereload.listen();

    nodemon({
        script: './relax',
        ext: 'js',
    }).on('restart', function () {
        setTimeout(function () {
            console.log("reload!");
            livereload.reload();
        }, 500);
    });

});

Here is VS Code Launch File:

"configurations": [
    {
        "name": "Launch Program",
        "type": "node2",
        "request": "launch",
        "program": "${workspaceRoot}\\relax.js",
        "cwd": "${workspaceRoot}",
        "outFiles": [],
        "sourceMaps": true
    },
    {
        "name": "Attach to Process",
        "type": "node2",
        "request": "attach",
        "address": "localhost",
        "restart": false,
        "sourceMaps": false,
        "localRoot": "${workspaceRoot}",
        "remoteRoot": null,
        "port": 5858
    }
]

Complete code can be found in git repo at: https://github.com/MichalZak/beanbag

I am unable to attach this process to my node server. Any suggestions?

Answer 1

The reason sourcemaps aren't used is because they do not exist. In other words, you are not writing/saving the generated sourcemaps. You can do that by adding these couple of lines to your gulpfile.js:

return merge([
...
    ])
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./src/'));