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.
Turns out you have to set bin/www in JavaScript file setting and everything will be working as supposed to.