VScode debugger can't find source maps

Hi so over the last couple days I've been trying to get the VScode debugger to detect the source maps for my type script code base.

When I set a break point in the type script it turns grey and the tooltip says "Breakpoint ignored because generated code not found"

I've inculded my launch.json file

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/src/server.ts",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/dist/**/*.js"
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Gulp develop",
            "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/dist/**/*.js"
            ],
            "args": [
                "develop"
            ]
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229,
            "protocol": "inspector",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/dist/**/*"
            ]
        }
    ]
}

And my gulp file

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var typescript = require('gulp-typescript');
var notify = require('gulp-notify');
var changed = require('gulp-changed');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var vinylPaths = require('vinyl-paths');
var nodemon = require('gulp-nodemon');
var debug = require('gulp-debug');
var runSequence = require('run-sequence');
var compiler = compiler || null;

var paths = {
    ts: 'src/**/*.ts',
    dist: 'dist/'
}

gulp.task('develop', function (callback) {
    runSequence('clean', 'build', function () {
         nodemon({
            exec: 'node --inspect',
            script: 'dist/server.js', 
            watch: 'src',
            ext: 'ts',
            tasks: ['build']
        });
        callback();
    });
});

gulp.task('build', function () {
    if (!compiler) {
        compiler = typescript.createProject('tsconfig.json', { "typescript": require('typescript') });
    }
    return gulp.src(paths.ts)
        .pipe(changed(paths.dist, { extension: '.js' }))
        .pipe(debug())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(compiler())
        .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' }))
        .pipe(gulp.dest(paths.dist));
});

gulp.task('clean', function() {
    return gulp.src([paths.dist])
        .pipe(vinylPaths(del));
});

And Here's some example directory structure

dist/server.d.ts  
dist/server.js 
dist/server.js.map
src/server.ts
gulpfile.js

Any help would be greatly appreciated.