WebStorm / grunt 调试运行时抛出 EADDRINUSE 错误

3
我有一个使用WebStorm IDE开发的Node / Angular应用程序。我可以通过WebStorm (Shift + F10)成功运行应用程序。然而,每次我尝试在调试模式下运行时,都会收到EADDRINUSE错误提示:
Running "concurrent:default" (concurrent) task
Verifying property concurrent.default exists in config...OK
Files: [no src] -> default
Options: limit=10, logConcurrentOutput
Error: listen EADDRINUSE :::52387

这是我的gruntfile.js文件 - 就像我说的那样,WebStorm可以很好地构建和运行它,但是当我尝试以调试模式运行它时,就会出现错误:

'use strict';

var fs = require('fs');

module.exports = function(grunt) {
// Unified Watch Object
var watchFiles = {
    serverViews: ['app/views/**/*.*'],
    serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js', '!app/tests/'],
    clientViews: ['public/modules/**/views/**/*.html'],
    sass: ['public/css/*.scss'],
    clientJS: ['public/js/*.js', 'public/modules/**/*.js'],
    clientCSS: ['public/modules/**/*.css'],
    mochaTests: ['app/tests/**/*.js']
};

// Project Configuration
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
        serverViews: {
            files: watchFiles.serverViews,
            options: {
                livereload: true
            }
        },
        serverJS: {
            files: watchFiles.serverJS,
            tasks: ['jshint'],
            options: {
                livereload: true
            }
        },
        clientViews: {
            files: watchFiles.clientViews,
            options: {
                livereload: true
            }
        },
        clientJS: {
            files: watchFiles.clientJS,
            tasks: ['jshint'],
            options: {
                livereload: true
            }
        },
        clientCSS: {
            files: watchFiles.clientCSS,
            tasks: ['csslint'],
            options: {
                livereload: true
            }
        },
        sass: {
            files: watchFiles.sass,
            tasks: ['sass:dev'],
            options: {
                livereload: true
            }
        },
        mochaTests: {
            files: watchFiles.mochaTests,
            tasks: ['test:server'],
        }
    },
    jshint: {
        all: {
            src: watchFiles.clientJS.concat(watchFiles.serverJS),
            options: {
                jshintrc: true
            }
        }
    },
    csslint: {
        options: {
            csslintrc: '.csslintrc'
        },
        all: {
            src: watchFiles.clientCSS
        }
    },
    uglify: {
        production: {
            options: {
                mangle: false
            },
            files: {
                'public/dist/application.min.js': 'public/dist/application.js'
            }
        }
    },
    cssmin: {
        combine: {
            files: {
                'public/dist/application.min.css': '<%= applicationCSSFiles %>'
            }
        }
    },
    nodemon: {
        dev: {
            script: 'server.js',
            options: {
                nodeArgs: ['--debug'],
                ext: 'js,html',
                watch: watchFiles.serverViews.concat(watchFiles.serverJS)
            }
        }
    },
    'node-inspector': {
        custom: {
            options: {
                'web-port': 1337,
                'web-host': 'localhost',
                'debug-port': 5858,
                'save-live-edit': true,
                'no-preload': true,
                'stack-trace-limit': 50,
                'hidden': []
            }
        }
    },
    concurrent: {
        default: ['nodemon', 'watch'],
        debug: ['nodemon', 'watch', 'node-inspector'],
        options: {
            logConcurrentOutput: true,
            limit: 10
        }
    },
    env: {
        test: {
            NODE_ENV: 'test'
        },
        secure: {
            NODE_ENV: 'secure'
        },
        development: {
            NODE_ENV: 'development'
        }
    },
    mochaTest: {
        src: watchFiles.mochaTests,
        options: {
            reporter: 'spec',
            require: 'server.js'
        }
    },
    karma: {
        unit: {
            configFile: 'karma.conf.js'
        }
    },
    sass: {
      dev: {
        files: {
          'public/css/style.css': 'public/css/*.scss'
        }
      }
    },
    copy: {
        localConfig: {
            src: 'config/env/local.example.js',
            dest: 'config/env/local.js',
            filter: function() {
                return !fs.existsSync('config/env/local.js');
            }
        }
    }
});

// Load NPM tasks
require('load-grunt-tasks')(grunt);

// Making grunt default to force in order not to break the project.
grunt.option('force', true);

// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
    var init = require('./config/init')();
    var config = require('./config/config');

    grunt.config.set('applicationJavaScriptFiles', config.assets.js);
    grunt.config.set('applicationCSSFiles', config.assets.css);
});

//Sass task
grunt.registerTask('default', ['lint', 'sass:dev', 'concurrent:default']);

// Debug task.
grunt.registerTask('debug', ['lint', 'copy:localConfig', 'concurrent:debug']);

// Secure task(s).
grunt.registerTask('secure', ['env:secure', 'lint', 'copy:localConfig', 'concurrent:default']);

// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);

// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);

// Test task.
grunt.registerTask('test', ['copy:localConfig', 'test:server', 'test:client']);
grunt.registerTask('test:server', ['env:test', 'mochaTest']);
grunt.registerTask('test:client', ['env:test', 'karma:unit']);
};
1个回答

9
问题是由Grunt生成子任务的方式引起的。默认情况下,grunt.util.spawn()会继承主进程参数,并以与主进程相同的选项启动子进程(--debug-brk=52387),因此子进程会在与主进程相同的调试端口上启动,导致EADDRINUSE错误。请参见https://github.com/gruntjs/grunt/issues/1420
为了解决问题,请尝试在Gruntfile.js的顶部添加process.execArgv = []; - 它应该有所帮助。

那样做可以构建和运行...一个问题是在WebStorm中它没有触发我的断点 - 你有什么想法如何让它正常工作吗? - DShultz
1
是的-现在子进程是没有使用“--debug-brk”选项生成的,因此调试器无法附加到它。因此,您需要相应地修改任务运行器代码...另外,您需要使用node.js运行配置而不是Grunt配置进行调试: 工作目录:<项目根目录> JavaScript文件:/path/to/grunt-cli/bin/grunt 应用程序参数:<任务名称> - lena
@lena,我也遇到了同样的问题,你能否在你的回答中详细说明一下?我该如何修改任务运行器以包含“--debug-brk”选项?还有其他什么需要放在“浏览器/实时编辑”中吗?我对此感到很困惑,无法使断点正常工作。谢谢! - Luisma
不,这不能在WebStorm配置中完成,您需要更改Grunt任务代码。当然,对于不同的Grunt插件,所需的更改也会有所不同。 - lena
谢谢您的回复,Lena。看起来并不容易。难道没有其他方法可以使断点正常工作吗?我只是使用Yeoman生成器创建了一个grunt服务器,但似乎我无法使用它进行调试。有什么建议吗?谢谢。 - Luisma
刚刚发现我可以使用这个:http://stackoverflow.com/questions/36486300/how-do-i-debug-within-my-webstorm-workspace 现在我可以调试了 :). 无论如何,还是谢谢你的帮助。 - Luisma

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接