it-swarm.com.ru

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

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

27
user2943490

С Node.js версии 6.3+ вы можете использовать флаг --inspect при запуске вашей задачи.

Для отладки задания gulp с именем css:

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

  2. Запустите одну из этих команд в соответствии с вашей версией Node.js. При необходимости замените ./node_modules/.bin/gulp на путь к вашей установке 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-brk (Node.js 6.3+) и --inspect-brk (Node.js 7+) используются для приостановки выполнения кода в первой строке кода вашей задачи. Это дает вам возможность открыть отладчик Chrome и установить точки останова до завершения задачи.

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

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

45
user2943490

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

 enter image description here

10
Blowsie

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

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

Вот так должен выглядеть ваш файл 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" ] } ] }

9
starkm

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

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

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

4
Avi Y.

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

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

2
Col Wilson

Мне понравился ответ @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');
});});
0
marcdahan