webstorm 环境下，如何调试 gulp + express?要可以进断点

Question

参考的博客：https://www.v2ex.com/t/349897

我想要的效果是这样的：

参考上面的博客，用gulp启动express，然后再webstorm里面调试。
比如静态资源index.html中引用一个index.js，页面加载时这个index.js调用express接口。在rotes中相应的controller中有一个断点。
我现在修改index.js，这时候应该把index.js同步到express的public目录，然后页面刷新，然后进我rotes中的断点。

代码

目录结构

gulp代码

let gulp = require('gulp');
let sass = require('gulp-sass');
let sequence = require('gulp-sequence');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;
let clean = require('gulp-clean');
let nodemon = require('gulp-nodemon');

let dist = './public';
let src = './staticsrc/';
let libs = 'libs/**/*';


gulp.task('clean', function () {
    return gulp.src([dist])
        .pipe(clean());
});

gulp.task('copylibs', function () {
    gulp.src('./staticsrc/libs/**/*')
        .pipe(gulp.dest('./public/libs'));
});

gulp.task('copyjs', function () {
    gulp.src('./staticsrc/js/**/*')
        .pipe(gulp.dest('./public/js'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('sass', function () {
    return gulp.src('./staticsrc/sass/**/*')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.reload({stream: true}));
});


gulp.task('watch', function () {
    gulp.watch('./staticsrc/sass/**/*', ['sass']);
    gulp.watch('./staticsrc/js/**/*', ['copyjs']);
});

//这个可以让express启动
gulp.task('nodemon', function (cb) {
    let started = false;

    return nodemon({
        script: 'app.js'
    }).on('start', function () {
        if (!started) {
            cb();
            started = true;
        }
    });
});

gulp.task('browser-sync', ['nodemon'], function () {
    let files = [
        'staticsrc/**/*',
        'views/**/*.html',
        'public/**/*'
    ];
    browserSync.init(null, {
        proxy: 'http://127.0.0.1:3000',
        port: 7000,
        livereload: true
    });
    gulp.watch(files).on('change', reload);
});

gulp.task('server',sequence('sass','watch', 'browser-sync'));

app.js

let express = require('express');
let path = require('path');
let bodyParser = require('body-parser');
let session = require('express-session');
let log = require('morgan');

let app = express();

app.use(log('dev'));

let indexRouter = require('./routes/index');
let userRouter = require('./routes/user');

app.use('/public/', express.static(path.join(__dirname, './public/')));

app.engine('html', require('express-art-template'));
app.set('view engine', 'express-art-template');
app.set('views', path.join(__dirname, './views/'));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(session({
    secret: 'itcast',
    resave: false,
    saveUninitialized: false
}));

app.use('/',indexRouter);
app.use('/user',userRouter);

app.listen(3000, function () {
    console.log('running...')
});

CMD 运行

然后我再CMD运行如下命令是可以的：

gulp copylibs & copyjs & gulp server

但是这样我就不能进断点了

webstorm

我再webstorm直接运行 gulp server 也是可以的，但是我以DEBUG方式运行 gulp server 的时候就出问题了，不仅运行巨慢，而且浏览器一直在加载，根本就没运行起来

webstorm 输出

"D:\program\webstorm\WebStorm 2017.3.1\bin\runnerw.exe" D:\program\node\node8\node.exe --inspect-brk=20606 F:\gitosc\km-pre-note\km-three\pre\ex-study\ex-two\node_modules\gulp\bin\gulp.js --color --gulpfile F:\gitosc\km-pre-note\km-three\pre\ex-study\ex-two\gulpfile.js server
Debugger listening on ws://127.0.0.1:20606/af1376db-cf8e-4307-86b5-1c7c09db6215
For help see https://nodejs.org/en/docs/inspector
[19:04:54] Using gulpfile F:\gitosc\km-pre-note\km-three\pre\ex-study\ex-two\gulpfile.js
[19:04:54] Starting 'server'...
[19:04:54] Starting 'sass'...
[19:04:54] Finished 'sass' after 34 ms
[19:04:54] Starting 'watch'...
[19:04:54] Finished 'watch' after 12 ms
[19:04:54] Starting 'nodemon'...
[19:04:54] Finished 'nodemon' after 285 ms
[19:04:54] Starting 'browser-sync'...
Starting inspector on 127.0.0.1:20606 failed: address already in use
[19:05:00] Finished 'browser-sync' after 5.96 s
[19:05:00] Finished 'server' after 6.31 s
[19:05:00] [nodemon] 1.17.5
[19:05:00] [nodemon] to restart at any time, enter `rs`
[19:05:00] [nodemon] watching: *.*
[19:05:00] [nodemon] starting `node app.js`
[19:05:00] [nodemon] app crashed - waiting for file changes before starting...
[Browsersync] Proxying: http://127.0.0.1:3000
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:7000
    External: http://192.168.0.100:7000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.100:3001
 --------------------------------------

提示20606被占用

我查了一下端口

就是webstorm在用

如何解决？

这是怎么回事？