Help Setting up Debug with Sourcemaps & Gulp

Note: Yes I know using webpack would make this very easy but I'm not there yet with this app.

For now I need to get this working well with gulp.

Not sure what to do, how to get this to work.

I try setting debug breakpoints in ./src js files but they're not being hit still.

screencast of the issue: https://youtu.be/1uNRhGZtakQ

My current setup (so far)

gulp.task('sourcemaps', function () {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('src'))
})

that produces sourcemaps in my ./src folder:

looking at CompanyList.js for example shows the mapping comment at the bottom:

My JS Debug Configuration:

My entire gulpfile.js

"use strict";
require('babel-core/register');

var path = require('path'),
  gulp = require('gulp'),
  less = require('gulp-less'),
  babel = require("gulp-babel"),
  shell = require('gulp-shell'),
  mocha = require('gulp-mocha'),
  runSequence = require('run-sequence'),
  browserify = require('gulp-browserify'),
  // watch = require('gulp-watch'),
  rename = require('gulp-rename'),
  del = require('del'),
  sourcemaps = require('gulp-sourcemaps')

var config = {
  watch: {
    src: './src/*.js',
  },
  test: {
    path: {
      specs: './test/specs/*-spec.js',
    },
    mocha: {
      reporter: 'spec'
    }
  }
};


gulp.task('precompile', function () {
  return gulp.src('./src/client/less/*.less')
    .pipe(less({
      compress: true
    }))
    .pipe(gulp.dest('./build/client/css'))
})

//---- BUILD ----//
///
gulp.task('build', function (done) {
  runSequence('clean', 'transpile', 'copy:build', done)
})

gulp.task('clean', function () {
  return del(['./build', './dist'])
})

gulp.task('transpile', function () {
  return gulp.src(['./src/**/*.js', , '!./src/client/less/*.js'])
    .pipe(babel())
    .pipe(gulp.dest("build"))
})

gulp.task('copy:build', function () {
  return gulp.src(['src/shared/**/*.json']).pipe(gulp.dest('build/shared'))
})

//---- DISTRIBUTE ----//
gulp.task('dist', function (done) {
  runSequence(
    'build',
    'create:dist',
    'sourcemaps',
    'copy:build:dist',
    'copy:ext',
    'link',
    'bundle',
    'precompile',
    'copy:data',
    'copy:assets',
    'copy:styles',
    'copy:feed',
    'tar', done)
})

gulp.task('copy:ext', function () {
  return gulp.src(['ext/**/*']).pipe(gulp.dest('dist/client/lib'))
})

gulp.task('copy:data', function () {
  return gulp.src(['src/shared/**']).pipe(gulp.dest('dist/shared'))
})

gulp.task('copy:assets', function () {
  return gulp.src(['src/client/assets/**']).pipe(gulp.dest('dist/client/lib/assets'))
})

gulp.task('copy:styles', function () {
  return gulp.src(['./build/client/css/*.css']).pipe(gulp.dest('dist/client/lib/css'))
})

gulp.task('copy:feed', function () {
  return gulp.src(['feed.xml']).pipe(gulp.dest('dist/client'));
})

gulp.task('copy:build:dist', function () {
  return gulp.src(['build/server.js', 'build/api.js', 'build/shared', 'src/**/index.html', 'package.json']).pipe(gulp.dest('dist'));
})

gulp.task('link', shell.task(['ln -s ' + process.cwd() + '/node_modules ' + process.cwd() + '/dist/node_modules']));
gulp.task('tar', shell.task(['tar -C dist -cf we-do-tdd.tar ./']));

gulp.task('bundle', function () {
  return gulp
    .src('build/client/index.js')
    .pipe(browserify({
      debug: true
    }))
    .pipe(rename('app.bundle.js'))
    .pipe(gulp.dest('dist/client/scripts/'))
})

gulp.task('create:dist', function () {
  return gulp.src(['dist/client/scripts'], {}).pipe(gulp.dest('dist/client/scripts'));
})

gulp.task('spec-frontend', function() {
  process.env.PORT = 8001;

  return gulp.src(['build/test/spec/frontend/**/*-spec.js'], {read: false})
    .pipe(mocha({
      reporter: config.test.mocha.reporter,
      ui: 'bdd'
    }))
})

gulp.task('spec-backend', function () {
  process.env.PORT = 8001;
  return gulp.src(['build/test/spec/backend/**/*-spec.js'], {read: false})
    .pipe(mocha({
      reporter: config.test.mocha.reporter,
      ui: 'bdd'
    }))
})

gulp.task('spec-all', function () {
  process.env.PORT = 8001;
  return gulp.src(['build/test/spec/**/*-spec.js'], {read: false})
    .pipe(mocha({
      reporter: config.test.mocha.reporter,
      ui: 'bdd'
    }))
})

gulp.task('sourcemaps', function () {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('src'))
})

//---- WATCH ----//
// gulp.task('watch', function() {
//   gulp.watch('src/**/*.js');
// });