web-dev-qa-db-ja.com

Gulpタスクをデバッグする方法は？

Googleのデバッガーでgulpfile.jsに定義されているgulpタスクをデバッグするにはどうすればよいですかChromeデバッガー、タスクのコードを1行ずつステップ実行しますか？

javascriptnode.jsdebugginggulp
46
user2943490

Node.jsバージョン6.3以降では、タスクの実行時に --inspectフラグ を使用できます。

cssという名前のgulpタスクをデバッグするには：

  1. Gulp実行可能ファイルがどこにあるかを調べます。 gulpがローカルにインストールされている場合、これはnode_modules/.bin/gulpになります。 gulpがグローバルにインストールされている場合は、ターミナルでwhich gulp（Linux/Mac）またはwhere gulp（Windows）を実行して検索します。

  2. Node.jsのバージョンに応じて、これらのコマンドのいずれかを実行します。必要に応じて、./node_modules/.bin/gulpをステップ1のgulpインストールへのパスに置き換えます。

    • 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フラグを使用します。

Chrome用の Node.js Inspector Manager（NIM） 拡張機能をインストールして、手順3を支援することもできます。これにより、Chromeデバッガーの準備が整ったタブ。URLを手動で参照する代わりに.

62
user2943490

VS Code 1.10+を使用している人向け

  1. デバッグパネルを開きます。
  2. 設定アイコンをクリックします。
  3. Add Configurationボタンをクリックします。
  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" ] } ] }

13
starkm

ウェブストームを使用している場合は、gulpパネルでタスクを右クリックして、デバッグを選択できます。

enter image description here

11
Blowsie

Windowsでuser2943490に感謝します。このバージョンは私にとってうまくいきました：

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

Gulp-nodemonを使用している場合は、gulpfileでこれを行うことができます。 execMapオプションを渡してください：

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

お役に立てれば。

4
Avi Y.

バージョン（ノードv8.11.3、npm 6.2.0、gulp 3.9.1）

Windows 10とgit bash

インストール Node.js V8 --inspector Manager（NiM） ＆に設定 preference

これを試して：

node --inspect-brk ./node_modules/gulp/bin/gulp.js --verbose
1
Ray Macz

私は@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