【gulp】browsersyncのエラーでgulpが起動しなくなった時の原因と解決方法

原因と解決までの流れ

gulpが起動しない

いつものようにgulpを立ち上げたところ、gulpエラーでブラウザが立ち上がらない状態に。
昨日までは特に問題なく使えていたのに…。
ターミナルを確認したところ以下のエラーが表示されていました。

Error: listen EADDRINUSE: address already in use :::3000

「browsersync」で使用しているポート番号3000が既に使用されていて使えない。と言われている。

どこで使われているか確認してみる

意図的に使用しているわけではなく、
ポート3000が何に使われているか全く分からなかったので、ターミナルで確認します。

$ lsof -i:3000

上記のコマンドをターミナルで確認すると、検索したポート番号が何に使われているかわかります。
以下のキャプチャのタイトルの下に使用されている情報が表示されます。

ターミナルで確認してみると「Node.js」で使われてるとメッセージが表示されました。
上記のキャプチャの「COMMAND」部分に表示されます。

本来「browsersync」で使用中の場合は「COMMAND」にブラウザ（Chromeとか）が表示されます。
「Node.js」ではポートを使用していないので、こちらを削除します。

使用されているポートを削除

$ kill ****

ターミナル上でポート3000で使用されているプロセスIDを「****」に入力して削除します。
プロセスIDは上記のキャプチャの「PID」で表示されている数字になります。

本来使うはずのポート番号が削除されるので、「browsersync」のエラーも解消され「gulp」が起動されるはずです。

うまくポートが削除されずエラーが続く

削除までの流れを行いgulpを起動したかったのですが、
私の場合、なぜか削除コマンドが上手く動かず、エラーが解決しませんでした。

うーん…とりあえず再起動。

PCを再起動したらうまくポートが削除されgulpがきちんと起動しました。
もしポートがうまく削除されなかった時には、PCの再起動をお勧めします。

ポート削除しなくても、最初から再起動したら解決したのかな…もしかして。

なぜこんな現象が起きたのか

またこんな現象が起きると嫌だな…と気になったので少し調べてみると、ターミナルでコマンドをきちんと終了しないと、異常終了となり何らかのプロセスが残ってしまう可能性があるとか。

あー、身に覚えがありますねー。

私はVSCodeのターミナルで作業しているのですが、ターミナル上でコマンド終了せず、エディタを閉じてしまうことが多々ありました。それが原因になっていたようです。今後作業終了時にはきちんと「Ctrl + c」してからエディタを閉じたいと思います。
心当たりがある方一緒に気をつけましょう。

そういえば、「browsersync」が3000ではなく、3001、3002、とかになっていた時があったので、多分これが原因。