More than 5 years have passed since last update.

Laravel Elixirでブラウザ同期

Last updated at 2015-10-20Posted at 2015-02-13

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

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

準備

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

$ vagrant box add laravel/homestead

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

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

$ brew install node

$ npm install --global gulp

$ 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