gulp の BrowserSync で watch を利用した際のちょっとした記述ミスで、大量のタブが開く問題発生

このエントリーをはてなブックマークに追加

昨日のエントリー『gulp で BrowserSync を使う』 を書いたのですが、 watch の記述をちょっと間違えていたところ、ブラウザのタブが大量に開いてエラーとなる問題が起きたので、メモとしてエントリー

バグ?起きた問題とは

先にも書いたのですが、ファイルを保存すると、1度目はタブがもう2つタブが開く状態になり、さらにもう一度更新すると、更に7つあらたにタブがひらいて、browser-sync も終了となります。

問題を起こした設定

watch のタスクを指定するところで、1つのみのタスクにもかかわらず、 [task] のように、 カッコで囲って複数としてみなされるようにしてしまっていました。(13行目参照)

gulpfile.js : 大量のタブが開く問題発生

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('server', function () {
  browserSync({
    notify: false,
    server: {
      baseDir: "html"
    }
  });

  gulp.watch('html/**/*.html', [reload]);
});

必ずしも複数を指定しなければならないというわけではないだろうなーとか思っていて、いつか増えた時のために!とおもってそのままにしていたところ、今回のようなバグに。

カッコを取ることで問題は発生しなくなりました。

browser-sync との組み合わせの問題なのかは現在未検証ですが、組み合わせた際に上記のように指定してしまうと大量のタブが開いてしまうバグが発生するので、 watch のタスクがひとつの場合はカッコを付けないように指定するのが良さそうです。