jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.2.15

deprecateなgulp-connectの代わりはBrowserSyncだけでいい

Category:
Gulp

CSS Nite LP39の感想記事であまり良いことを書きませんでしたが、収穫も多数ありました。gulpを書く気にさせてくれたこともそのひとつです。

そもそも僕はまだNode.jsそれ自体にも積極的な興味を持てずにいるので(まだそれどころではないので)、業務を円滑にするためにgruntを最低限利用しているものの設定ファイルやプラグインを山盛りにしていませんし、gruntとgulpのどちらが優秀かという論争にも参加する気になりませんでした。

しかしgulpがgruntよりも複雑なタスクを記述しやすいと聞き手を出してみようと思ったところ、たしかに書きやすい。プラグインは変数に叩き込めるし、タスクの処理はチェーンでつなげたとおりに動くので、gruntに比べるとかなり直感的な印象があります。かなり好感触でしたので業務用に基礎ファイルを作成しようと準備を進めていたところ、1つだけ障害がありました。ローカルサーバを立てるのによく使われいたらしいgulp-connectについてです。手詰まった内容の詳細は以下のとおり。

  • gulp-connectは2014年中?にdeprecateとなった。
  • deprecateの理由には「connectを使え」と書いてあるが、検索するとgulp-connectのノウハウが率先して出てきてしまう。
  • connectだけだとlivereloadできない。
  • livereloadの実装方法を調べようとすると、またgulp-connectの情報に引っかかってしまう。
  • gulp-connectの代わりにgulp-webserverを勧められるが、まだダウンロード数が少なく安易に手を出しにくい。

じゃあどうすればいいのという感じですが、BrowserSyncですべて解決しました。

BrowserSyncは、ローカルサーバ、タスクに応じた自動リロード、ブラウザ同期を一括で行えるプラグインです。
gulpfile.jsにおけるタスクの書き方は以下のとおり。(BrowserSyncの公式ページのリファレンス内容を引用しています。)

var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: path.dst
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

その他のタスクの実行時にあわせた自動リロードをさせたい場合は、たとえばwatchを利用するなら以下のように書きます。

gulp.watch(path.dst + '/*.html', ['bs-reload']);

また、他のタスクに関連付けてリロードを実行する場合は以下のように書きます。

gulp.task('uglify', function(){
  var src = [path.src + '/js/*.js'];
  var dst = path.dst + '/js/';

  gulp.src(src)
    .pipe(uglify())
    .pipe(gulp.dest(dst))
    .pipe(browserSync.reload({
      stream: true
    }));
});

これだけで完了です。gulpfile.jsが書きやすいというのもありますが、かなり簡単に実装することができました。

もしgulp-connectの代替プラグインを探していてまだ迷っている方がいれば、BrowserSyncを試してみてはいかがでしょうか。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.