How to debug Gulp tasks written in TypeScript via WebStorm

Currently it looks very easy to debug Gulp tasks in WebStorm when they are written in JavaScript. You just right click on the gulp task from the Gulp Tasks Window and select debug and voila :). Now with TypeScript used frequently around and after installing https://github.com/TypeStrong/ts-node you can write your Gulp tasks using TypeScript and you will be able to also create gulpfile.ts instead of gulpfile.js.

Running Gulp tasks written with TypeScript is the same as before gulp my.task and actual code of your task will be inside my.task.ts. What will happen is that this ts-node module will do some magic probably compile in memory the gulpfile.ts and all registered there tasks, then it will provide them some how to the real Gulp node module.

My question is how can I add break point to this Gulp *.ts files and debug them via WebStorm?

Here is what happens if I try to debug a Gulp task written with TypeScript:

"C:\Program Files (x86)\JetBrains\WebStorm 2016.2.3\bin\runnerw.exe" "C:\Program Files (x86)\nodejs\node.exe" --debug-brk=64720 --expose_debug_as=v8debug E:\XXXXXXXX\node_modules\gulp\bin\gulp.js --color --gulpfile E:\XXXXXXXX\gulpfile.ts build.js.dev
Debugger listening on [::]:64720
[17:43:13] Requiring external module ts-node/register

Process finished with exit code -1073741510 (0xC000013A: interrupted by Ctrl+C)

You can find a project which use TypeScript to write Gulp tasks here:https://github.com/mgechev/angular2-seed

1 comment
Comment actions Permalink

the problem is that ts-node uses absolute paths to files in sourcemaps, like:

{"version":3,"file":"C:\\downloads\\angular2-seed-master\\angular2-seed\\gulpfile.ts","sources":["C:\\downloads\\angular2-seed-master\\angular2-seed\\gulpfile.ts"]

this doesn't currently work, please follow https://youtrack.jetbrains.com/issue/WEB-23002 for updates

0

Please sign in to leave a comment.