GulpとBrowsersyncの連携

Browsersync単独でも便利なのですが、GruntGulpといったタスクランナーと連携すると更に便利です。例えば、SassやTypeScriptをコンパイルした後にブラウザをリロードしたり、スプライトシートを作りながら実機で表示確認をしたり等ができるようになります。ここではGulpと連携する例をご紹介します。Gulpの基本的な導入方法については、以前の記事「5分で導入できる! タスクランナーGulpを使ってWeb制作を爆速にしよう」を御覧ください。なお、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が開始されるとログに以下のように出力されます。

Browsersyncのログ

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

最後に

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