ブラウザ確認が一瞬!
Gulp・Gruntと始めるBrowsersync入門

20
28
49

Webサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。

Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。

Browsersyncのデモ動画

Browsersyncを使ってデスクトップブラウザとスマートフォン(iPhone)のブラウザを同期させ、ファイルの編集後に自動リロードするデモ動画を御覧ください。CSS3でハリネズミを走らせるアニメーションです。HTMLやCSSのファイル編集がリアルタイムに反映されていることがわかります。

Browsersyncは何を便利にしてくれるのか

ファイルの編集後に複数ブラウザの確認をする際、以下のような手間があります。

  1. ファイルを編集する度に、ブラウザをすべて手動でリロードする手間
  2. 別のデスクトップブラウザやスマートフォンブラウザでの表示確認の為に、ローカルサーバーやリモートサーバーを立てる手間

Browsersyncを使用すると、これらの手間が省け制作効率を多くアップさせることができます。Browsersyncの主な特徴は以下です。

  1. ローカルサーバーが自動で起動
  2. 同じネットワークにある端末のすべてのブラウザが同期される
  3. 同期されたブラウザにおいては、スクロール、クリック、再読み込み等のユーザーアクションがすべて同期される

GulpとBrowsersyncの連携

Browsersync単独でも便利なのですが、GruntGulpといったタスクランナーと連携するとさらに便利です。たとえば、SassやTypeScriptをコンパイルした後にブラウザをリロードしたり、スプライトシートを作りながら実機で表示確認をしたり等ができるようになります。ここではGulpと連携する例をご紹介します。Gulpの基本的な導入方法については、以前の記事「5分で導入できる! タスクランナーGulpを使ってウェブ制作を爆速にしよう」を御覧ください。なお、Gruntとも連携できますのでGruntの場合は適宜読み替えていただければと思います。

Browsersyncのインストール

Browsersyncのインストールは簡単です。Node.jsがインストールされた環境で、以下のコマンドを使ってBrowsersyncプラグインをインストールします。

npm install browser-sync --save-dev

※ Macでインストール中にエラーが出る場合は、sudo npm install browser-sync --save-devという風に管理者権限で実行します。

Browsersyncの基本は2つのAPI

Browsersyncを使うときに抑えておきたいAPIは以下の2つです。

  • browserSync({server: {baseDir: ルートフォルダ}})
    ブラウザを同期した場合のルートフォルダーを指定します。
  • .reload()
    同期しているブラウザをすべてリロードします。

Gulpでのタスク設定

gulpfile.jsでプラグインの読み込みとタスクの設定を行います。srcフォルダー以下のファイルの更新を監視し、ファイルが更新されたら同期しているブラウザをリロードするというタスクを作ってみます。

// gulpプラグインの読みこみ
var gulp = require("gulp");

// browser-syncのプラグインの読み込み
var browserSync = require("browser-sync");

// タスクの設定
gulp.task("browserSyncTask", function() {
  browserSync({
    server: {
      baseDir: "src" // ルートとなるディレクトリを指定
    }
  });

  // srcフォルダ以下のファイルを監視
  gulp.watch("src/**", function() {
    browserSync.reload(); // ファイルに変更があれば同期しているブラウザをリロード
  });
});

タスクを実行するとBrowsersyncが開始します。

gulp browserSyncTask

BrowserSyncが開始されるとログに以下のように出力されます。

「External URL」が自動で立ち上がったローカルサーバーのURLです。同じネットワークにあるデスクトップブラウザやスマートフォンのブラウザからこのURLにアクセスすれば、すべてのブラウザが同期されます。

最後に

Browsersyncを使うと、複数のブラウザや複数の端末における動作確認が容易になり、制作者のみならずチーム内のメンバーによる確認の手助けにもなります。動作確認がスムーズになると、その分制作のブラッシュアップに注力できるようになります。是非お試しください。

※この記事が公開されたのは4年5ヶ月前ですが、 平成29年1月16日に内容をメンテナンスしています。