Laravel Elixirでブラウザ同期

Laravelだけに限らないけれど、ViewファイルやCSSを変更するたびにブラウザを手作業で更新するのはとても面倒。メインのブラウザだけならまだいいけれど、複数ブラウザでチェックしたいとかなってくるともう大変。こんな時はLaravel ElixirとBrowserSyncで自動化しよう。

自動化するとどんな感じになるかはBrowserSyncのWebページにある動画がわかりやすい。

準備

Homesteadの準備

LaravelのサイトにあるDocumentを見ながらHomesteadをインストールする。

Vagrant Box

$ vagrant box add laravel/homestead

Homestead

$ cd /path/to/project
$ composer require laravel/homestead --dev
$ php vendor/bin/homestead make

Laravel Elixirの準備

LaravelのサイトにあるDocumentを見ながらLaravel Elixirを使う準備をする。

Node.js

$ brew install node

Gulp

$ npm install --global gulp

Laravel Elixir

$ npm install

設定

gulpfile.js を下記のような感じに修正する。

Homesteadのhostを変えている場合はproxyの部分を修正することで対応する。

var elixir = require('laravel-elixir');

elixir(function(mix) {
  mix.browserSync({
    proxy: 'homestead.app'
  });
});

使い方

HomesteadでVMを立ち上げてgulp watchするとブラウザの同期がはじまる。

$ homestead up
$ gulp watch