Categories
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.

gulpfile.js

'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
var BROWSER_SYNC_RELOAD_DELAY = 500;
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() {
reload({
stream: false
});
}, BROWSER_SYNC_RELOAD_DELAY);
});
});
gulp.task('browser-sync', ['nodemon'], function () {
// for more browser-sync config options: http://www.browsersync.io/docs/options/
browserSync({
// 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
//.pipe(uglify())
//.pipe(gulp.dest('...'));
});
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"))
.pipe(gulp.dest('./public/stylesheets'))
.pipe(reload({stream:true}));
});
gulp.task('css', function () {
return gulp.src('public/**/*.css')
.pipe(reload({ stream: true }));
})
gulp.task('bs-reload', function () {
reload();
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch('public/**/*.js', ['js', reload()]);
gulp.watch('public/scss/*.scss', ['sass']);
gulp.watch('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.