Typescript debugging karma tests with VSCode - unit-testing

Question

I want to use visual studio code to debug karma tests in typescript file. But I don't know config because I use gulp compile .ts file to dist directory.
gulp compile js file to dist
gulp compile:
var appDev = 'src';
var appProd = __dirname + '/dist';
gulp.task('compile', function() {
return gulp.src('src/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsProject())
.js.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(appProd + '/src'));
});
gulp.task('copy:index', function() {
return gulp.src(['index.html', 'systemjs.config.js'])
.pipe(gulp.dest(appProd))
});
gulp.task('copy:assets', function() {
return gulp.src(['src/**/*', '!src/**/*.ts' ], {base: './'})
.pipe(gulp.dest(appProd))
});
gulp.task('css', function() {
var lessStream = gulp.src('./less/app.less')
.pipe(less())
.pipe(concat('./less/styles.less'));
return merge(lessStream)
.pipe(concat('styles.css'))
.pipe(gulp.dest(appProd + '/styles'));
});
gulp.task('copy:node_modules', function() {
return gulp.src([
... // list file copy
], {cwd: 'node_modules/**'}) /* Glob required here. */
.pipe(gulp.dest(appProd + '/node_modules'));
});
gulp test:
gulp.task('test-compile', function() {
return gulp.src([
'./src/**/*.ts',
'./testing/**/*.ts'
], { base: '.'})
.pipe(sourcemaps.init())
.pipe(tsProject())
.js.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(appProd));
});
gulp.task('test', [ 'clean', 'copy:bower_components', 'copy:node_modules', 'copy:index',
'copy:js', 'css', 'copy:html', 'test-compile', 'watch' ], function(done) {
new Server({
configFile: __dirname + '/dist/karma.conf.js'
}, done).start();
});
karma.conf.js :
module.exports = function(config) {
var appBase = 'src/'; // transpiled app JS and map files
var appAssets = __dirname + '/src/'; // component assets fetched by Angular's compiler
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'testing/'; // transpiled test JS and map files
config.set({
basePath: '.',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('karma-remap-istanbul')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.min.js',
'node_modules/reflect-metadata/Reflect.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{ pattern: 'node_modules/#angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/#angular/**/*.js.map', included: false, watched: false },
{ pattern: 'systemjs.config.js', included: false, watched: false },
'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
{ pattern: 'node_modules/angular2-toaster/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/ng2-cookies/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/lodash/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/dragula/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/ng2-dragula/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/ng2-select/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/ng2-bootstrap/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/ng2-dnd/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/ng2-uploader/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/moment/**/*.js', included: false, watched: false },
{ pattern: 'bower_components/jquery/dist/jquery.min.js', watched: false },
{ pattern: 'bower_components/bootstrap/dist/js/bootstrap.min.js', watched: false },
{ pattern: 'node_modules/**/*.js.map', included: false, watched: false },
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.js', included: false, watched: true },
// Asset (HTML & CSS) paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{ pattern: appBase + '**/*.html', included: false, watched: true },
{ pattern: 'styles/*.css', included: false, watched: true },
// Paths for debugging with source maps in dev tools
{ pattern: appBase + '**/*.js.map', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false }
],
// Proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
'/src/': appAssets
},
exclude: [],
preprocessors: {
'src/**/*.js': ['coverage']
},
reporters: ['progress', 'coverage', 'karma-remap-istanbul'],
remapIstanbulReporter: {
reports: {
html: 'coverage'
}
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
Help me config karma to debug with typescript file use VSCode