如何在 WebStorm 10 中通过 Gulpfile 调试由 nodemon 启动的 Express 应用程序？

Question

我有一个通过 Gulpfile 配置运行的 Express 应用程序。

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']);
})

如何开始在 Webstorm 中调试此应用程序？我试过 'Edit Configuration' 面板，设置 NodeJS 配置和 Gulpfile 配置，但还是不行。

我只是不明白如何实际实现这种调试过程。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

原来你必须在 JavaScript 文件 设置中设置 bin/www 一切都会正常工作应该。

如何在 WebStorm 10 中通过 Gulpfile 调试由 nodemon 启动的 Express 应用程序？

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

javascript

debugging

node.js

express

webstorm