Как отладить задачу Gulp?

Как отлаживать задачу gulp, определенную в моем gulpfile.js, с помощью отладчика, такого как отладчик Google Chrome, через строчку кода задачи?

Ответ 1

С Node.js версии 6. 3+ вы можете использовать флаг --inspect при выполнении своей задачи.

Чтобы отладить задачу css именем css:

  1. Узнайте, где живет ваш исполняемый файл gulp. Если gulp установлен локально, это будет в node_modules/.bin/gulp. Если gulp установлен глобально, запустите тот which gulp (Linux/Mac) или where gulp (Windows) в терминале, чтобы найти его.

  2. Запустите одну из этих команд в соответствии с вашей версией Node.js. При необходимости замените ./node_modules/.bin/gulp на путь к установке ./node_modules/.bin/gulp с шага 1.

    • Node.js 6. 3+: node --inspect --debug-brk./node_modules/.bin/gulp css
    • Node.js 7+: node --inspect-brk./node_modules/.bin/gulp css
  3. Используйте Chrome для перехода на chrome://inspect.

Флаги -debug --debug-brk (Node.js 6. 3+) и --inspect-brk (Node.js 7+) используются для приостановки выполнения кода в первой строке кода вашей задачи. Это дает вам возможность открыть отладчик Chrome и установить контрольные точки до завершения задачи.

Если вы не хотите, чтобы отладчик останавливался в первой строке кода, просто используйте флаг --inspect.

Вы также можете установить расширение Node.js Inspector Manager (NIM) для Chrome, чтобы помочь с шагом 3. Это автоматически откроет вкладку Chrome с готовым к отладке браузером, в качестве альтернативы ручному просмотру URL-адреса.

Ответ 2

Если вы используете webstorm, вы можете щелкнуть правой кнопкой мыши задачу на панели gulp и выбрать debug.

введите описание изображения здесь

Ответ 3

Для тех, кто использует VS Code 1.10 +

  • Откройте панель отладки.
  • Нажмите на значок настроек.
  • Нажмите кнопку "Добавить конфигурацию".
  • Выберите Node.js: Gulp Задача.

Вот как выглядит ваш файл launch.json.

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Gulp task", "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js", "args": [ "yourGulpTaskName" ] } ] }

Ответ 4

Если вы используете gulp -nodemon, вы можете сделать это в своем gulpfile. Просто передайте ему опцию execMap:

gulp.task('default', function() {
    nodemon({
        script: 'server.js',
        ext: 'js',
        execMap: {
            js: "node --inspect"
        }
    })
}

Надеюсь, что это поможет.

Ответ 5

Спасибо user2943490, в Windows я нашел, что эта версия работала для меня:

node --inspect --debug-brk ./node_modules/gulp/bin/gulp.js --verbose

Ответ 6

Мне понравился ответ @Avi Y. но я полагаю, что люди оценили бы более полный сценарий:

gulp.task('nodemon', ['sass'], function(cb) {
var started = false;
    consoleLog('nodemon started');
return nodemon({
    //HERE REMOVE THE COMMENT AT THE BEGINING OF THE LINE YOU NEED
    //exec: 'node --inspect --debug-brk node_modules/gulp/bin/gulp.js', 
    exec: 'node --inspect --debug-brk',
    //exec: 'node --inspect',
    script: path.server,
    ignore: ['*/gulpfile.js', 'node_modules/*'],
    verbose: true
}).on('start', function() {
    if (!started) {
        cb();
        started = true;
    }
}).on('restart', function() {
    consoleLog('nodemon restarted the server');
});});