web-dev-qa-db-fra.com

Comment déboguer une tâche Gulp?

Comment déboguer une tâche de groupe définie dans mon gulpfile.js avec un débogueur tel que le débogueur Google Chrome, en parcourant le code de la tâche ligne par ligne?

javascriptnode.jsdebugginggulp
27
user2943490

Avec Node.js version 6.3+, vous pouvez utiliser l'indicateur --inspect lorsque vous exécutez votre tâche.

Pour déboguer une tâche graphique nommée css:

  1. Découvrez où vit votre gosse exécutable. Si gulp est installé localement, il sera à node_modules/.bin/gulp. Si gulp est installé globalement, exécutez which gulp (Linux/Mac) ou where gulp (Windows) dans un terminal pour le trouver.

  2. Exécutez l'une de ces commandes en fonction de votre version de Node.js. Si nécessaire, remplacez ./node_modules/.bin/gulp par le chemin d'accès à votre installation gulp à l'étape 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. Utilisez Chrome pour accéder à chrome://inspect.

Les indicateurs --debug-brk (Node.js 6.3+) et --inspect-brk (Node.js 7+) permettent de suspendre l'exécution du code sur la première ligne de code de votre tâche. Cela vous donne une chance d'ouvrir le débogueur de Chrome et de définir des points d'arrêt avant la fin de la tâche.

Si vous ne souhaitez pas que le débogueur suspende la première ligne de code, utilisez simplement l'indicateur --inspect.

Vous pouvez également installer l'extension Node.js Inspector Manager (NIM) pour Chrome pour vous aider à l'étape 3. Cela ouvrira automatiquement un onglet Chrome avec le débogueur prêt à être utilisé, au lieu de rechercher manuellement une URL. .

45
user2943490

Si vous utilisez webstorm, vous pouvez cliquer avec le bouton droit de la souris sur la tâche dans le panneau gulp et sélectionner déboguer.

 enter image description here

10
Blowsie

Pour toute personne utilisant VS Code 1.10+

  1. Ouvrez le panneau de débogage.
  2. Cliquez sur l'icône des paramètres.
  3. Cliquez sur Ajouter une configuration bouton.
  4. Choisissez Node.js: Gulp Task.

Voici à quoi devrait ressembler votre fichier 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

Si vous utilisez gulp-nodemon, vous pouvez le faire dans votre fichier gulp ..__, il suffit de lui passer l'option execMap

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

J'espère que cela t'aides.

4
Avi Y.

Merci utilisateur2943490, j'ai trouvé cette version sous Windows

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

2
Col Wilson

J'ai aimé la réponse de @Avi Y. mais je suppose que les gens auraient apprécié un script plus complet:

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