【Node.js & Gulp】gulp watchでエラー回避！ おすすめの方法とサンプルコード

Node.jsとGulpにおける「gulp watch」のエラー回避方法

Gulpの「watch」タスクは、ファイルに変更があった際に自動的にタスクを実行する便利な機能です。しかし、ファイルの変更内容にエラーがあると、タスクが強制終了してしまい、開発の効率が下がってしまいます。

そこで今回は、「gulp watch」のエラーによる強制終了を防ぐ2つの方法について、Node.jsとGulpを用いて分かりやすく解説します。

方法1：gulp-plumberプラグインを使う

gulp-plumberは、エラーが発生してもタスクが強制終了するのを防止するプラグインです。以下の手順でインストールと使い方を説明します。

gulp-plumberのインストール

npm install gulp-plumber --save-dev

gulp-plumberの使い方

const gulp = require('gulp');
const plumber = require('gulp-plumber');

gulp.task('watch', function() {
  gulp.watch('src/**/*.scss', plumber())
    .pipe(gulp.sass())
    .pipe(gulp.dest('dist/css'));
});

上記のコードでは、plumber()関数でエラー処理をラップすることで、エラーが発生してもタスクが強制終了せずに続行されます。

方法2：エラーハンドリングを行う

gulp.watchのon('error')イベントを使用して、エラー発生時の処理を独自に定義することもできます。以下のコードは、エラー内容をコンソールに出力する例です。

const gulp = require('gulp');

gulp.task('watch', function() {
  gulp.watch('src/**/*.scss')
    .on('error', function(err) {
      console.error(err.toString());
    })
    .pipe(gulp.sass())
    .pipe(gulp.dest('dist/css'));
});

この方法では、エラー内容を自由に合わせて処理することができます。

• より高度なエラー処理には、gulp-notifyなどのプラグインを併用するのも有効です。
• エラーの原因を特定するためには、コンソール出力やデバッガなどを活用しましょう。
• 上記の方法はあくまで一例です。状況に応じて、エラーの種類や処理内容を調整してください。

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const sass = require('gulp-sass');

gulp.task('watch', function() {
  gulp.watch('src/**/*.scss')
    .on('error', function(err) {
      console.error(err.toString());
      this.emit('end'); // エラー発生後も処理を続行
    })
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

解説

1. gulp-plumberとgulp-sassのインストール

   npm install gulp-plumber gulp-sass --save-dev
   

2. watchタスクの定義

   • gulp.watch('src/**/*.scss'): 対象となるディレクトリとファイルパターンの指定
   • .on('error', function(err)): エラー発生時の処理を定義
     • console.error(err.toString()): エラー内容をコンソールに出力
     • this.emit('end');: エラー発生後も処理を続行
   • .pipe(plumber()): エラーハンドリング処理を追加
   • .pipe(sass()): Sassのコンパイルを実行
   • .pipe(gulp.dest('dist/css')): コンパイル結果を指定ディレクトリに出力

• gulp-plumberプラグインで、より詳細なエラー処理を追加することも可能です。
• エラーが発生してもコンソールにエラー内容を出力し、タスクを強制終了せずに続行します。

• このコードはあくまで一例です。必要に応じて、エラー処理の内容や対象となるファイルを調整してください。

他の方法

ファイル監視の対象となるディレクトリを工夫する

gulp.watchは、指定したディレクトリ内のすべてのファイルを監視します。そのため、エラーが発生しやすいファイルや不要なファイルも監視対象になってしまうと、エラー頻度が高くなってしまいます。

そこで、以下の点に注意して、監視対象となるディレクトリを工夫することで、エラーを減らすことができます。

• エラーが発生しやすいファイルを別ディレクトリに格納する: エラーが発生しやすいファイルは、別ディレクトリに格納し、監視対象から除外する。
• 必要なファイルのみを監視対象にする: すべてのファイルを監視するのではなく、実際に変更される可能性のあるファイルのみを監視対象にする。

例

gulp.task('watch', function() {
  gulp.watch('src/**/*.js', function(event) {
    if (event.type === 'added') {
      // 新規追加されたファイルは無視する
      return;
    }

    // 既存のファイルのみ処理する
    gulp.src(event.path)
      .pipe(gulp.dest('dist/js'));
  });
});

エラーが発生しやすいコードを修正する

エラーが発生しやすいコードは、修正することでエラーを減らすことができます。

具体的には、以下の点に注意してコードを見直しましょう。

• ランタイムエラー: ファイルパスや変数名などの参照ミスなど、ランタイムエラーが発生する可能性がないか確認する。
• 論理エラー: 論理的に矛盾している箇所がないか確認する。
• 構文エラー: スペルミスや句読点の誤りなど、構文エラーがないか確認する。

• エラーが発生した時に通知する: エラーが発生した時にメールやSlackなどで通知することで、早期に問題を発見することができます。
• タスクを実行する前にファイルの変更状況を確認する: タスクを実行する前に、ファイルの変更状況を確認することで、エラーが発生する可能性を減らすことができます。
• ファイル監視のインターバルを調整する: ファイル監視のインターバルを短くしすぎると、CPU負荷が高くなり、エラーが発生しやすくなる場合があります。必要に応じて、インターバルを調整してください。