debugging express javascript node.js webstorm

How to debug Express app launched by nodemon via Gulpfile in WebStorm 10?

I’ve got an Express app that runs via Gulpfile config.


'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
var reload = browserSync.reload;
// we'd need a slight delay to reload browsers
// connected to browser-sync after restarting nodemon
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
// nodemon our expressjs server
script: './bin/www',
// watch core server file(s) that require server restart on change
watch: ['app.js']
.on('start', function onStart() {
// ensure start only got called once
if (!called) { cb(); }
called = true;
.on('restart', function onRestart() {
// reload connected browsers after a slight delay
setTimeout(function reload() {
stream: false
gulp.task('browser-sync', ['nodemon'], function () {
// for more browser-sync config options:
// informs browser-sync to proxy our expressjs app which would run at the following location
proxy: 'http://localhost:3000',
// informs browser-sync to use the following port for the proxied app
// notice that the default port is 3000, which would clash with our expressjs
port: 4000,
// open the proxied app in chrome
browser: ['google-chrome']
gulp.task('js', function () {
return gulp.src('public/**/*.js')
// do stuff to JavaScript files
gulp.task('sass', function () {
return gulp.src('./public/scss/*.scss')
.pipe(sass({outputStyle: 'compressed', sourceComments: 'map'}, {errLogToConsole: true}))
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
gulp.task('css', function () {
return gulp.src('public/**/*.css')
.pipe(reload({ stream: true }));
gulp.task('bs-reload', function () {
gulp.task('default', ['browser-sync'], function () {'public/**/*.js', ['js', reload()]);'public/scss/*.scss', ['sass']);'public/**/*.html', ['bs-reload']);

How can I start debugging this application in Webstorm? I’ve tried ‘Edit Configuration’ panel, setting up NodeJS configuration and Gulpfile configuration, but still no luck.

I just don’t understand how to actually implement this kind of debug process.

Any help would be appreciated. Thanks.