omachizura

仕事メモ、役に立ったスキルをまとめています。


LaravelのElixirでbrowserSyncを導入する

LaravelのElixirでビルド後にブラウザを自動で再表示するために、browserSyncを導入しました。

最初は単純に以下のようにしてgulp watchを実行してみました。

elixir(mix => {
    mix.webpack('app.js')
       .browserSync({proxy: 'localhost:8000'});
});

すると、以下のエラーが発生しました。

To use "mix.browserSync()", please run the following command, and then trigger gulp again.
=======================================================
npm install laravel-elixir-browsersync-official --save-dev
=======================================================

browserSyncをするためには「laravel-elixir-browsersync-official」が必要とのことなので、提示されたコマンド通りにインストールします。

npm install laravel-elixir-browsersync-official --save-dev

インストール後、再度gulp watchを実行すると、自動でlocalhost:3000がブラウザで立ち上がりました。しかし、ずっと読み込み中のまま、画面が表示されません。

表示させるためには、php artisan serveを実行して、laravelが動かせるようにしておく必要があります。