Browsersync on Laravel!!

今回はBrowsersyncを使って、Laravelの開発効率化を目指します。

Browsersyncとは

ファイルの変更を監視・検知して自動でブラウザをリロードしてくれるNode.jsのモジュールです。

Node.jsモジュールなのでNode.jsが稼働する環境が必須です。

【参考】普通の使い方

  1. npm install -g browser-syncでBrowsersyncをグローバルインストール
  2. browser-sync start --server --files " ... 監視対象 ... "を実行

と、手軽に実装できます。

もっとも、基本はプロジェクト内に導入し&package.jsonでコマンド化しておくのがベターかと思います…。
→別記事

Laravelでの実装

Laravelでこの機能を使うには同じくNodeモジュールであるLaravel Mixを導入する必要があります。これはLaravelインストール時に生成されるpackage.jsonにあらかじめ記載されていますのでnpm installで導入しましょう。

その後webpack.mix.jsに下の内容を追記します。

最後にnpm run watchで無事にBrowsersyncが稼働します。

【補足】Browsersyncがエラーを吐くとき

browser-syncモジュールのバージョンが2.26.xの場合、エラーとなる状況が確認されています。
対症療法的ですがbrowser-syncのバージョンを2.25.0に落とすと正常に稼働しました。

参考記事

Laravel-Mix, BrowserSyncで画面を自動リロードする方法 - Qiita
# 環境 | | バージョン| |------------------|------------------:| | macOS High Sierra| ...
タイトルとURLをコピーしました