【Laravel Mix】ブラウザを自動更新｜Browsersyncの設定方法

Laravel Mixでは、指定したファイルが更新されたらブラウザを自動更新するBrowsersyncを利用できます。

今回は、Laravel Mixで、そのBrowsersyncを利用する方法となります。

また、今回の例ではLaravel Mix をすでにインストールしている前提としています。Laravel Mix のインストール方法などについては、以下のリンク先を参考にしてみてください。

LaravelでLaravel Mixをインストールして利用する方法

【Laravel Mix】Browsersyncでファイル更新時にブラウザを自動リロードする設定
まとめ
参考サイトなど

【Laravel Mix】Browsersyncでファイル更新時にブラウザを自動リロードする設定

Laravel MixでBrowsersyncを利用するには、まず、Laravel Mixの設定を行えるwebpack.mix.jsファイルに、Browsersyncの設定を追記します。

Browsersyncの設定例｜webpack.mix.js

以下、webpack.mix.jsファイルにBrowsersyncの設定を追記した例となります。

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')

   // browserSyncの設定
   .browserSync({
      files: [
         'resources/**/*',
         'app/**/*',
         'config/**/*',
         'routes/**/*',
         'public/**/*'
      ],
      proxy: 'http://localhost:8000',
   });

browserSyncを利用するには、.browserSync()メソッドを追加します。メソッドの引数にはオブジェクトで設定を指定します。

上記の例では、それぞれ以下を設定しています。

"files"の値には、配列で任意のファイルを指定します。それにより、指定したファイル更新時にブラウザが自動リロードします。

"proxy"の値には、プロジェクトの仮想環境で利用しているローカルURLを指定します。今回の例ではlocalhostを指定しています。

ファイルの監視をスタート

上記のように.browserSync()メソッド追記して保存後、以下のnpm-scriptsのコマンドを実行します。

npm run watch

それにより、指定したファイルの監視をスタートします。また、ブラウザには、ファイル更新時に自動リロードするローカルサイトが新規表示されます。

CLI画面には以下のような結果が表示されますが、LocalとExternalのURLがブラウザの自動更新をするローカルサイトのアドレスとなります。

[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 -------------------------------------------
       Local: http://localhost:3000
    External: http://192.168.XX.XXX:3000
 -------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------------
[Browsersync] Watching files...

スマホでブラウザを自動更新

また、スマホでブラウザの自動更新を利用しローカルサイトを確認する場合には、ローカルネットワークに接続しているスマホで、上記表示結果のExternalのURLにアクセスします。

まとめ

以上がLaravel MixでBrowsersyncを利用し、指定したファイルが更新されたらブラウザを自動更新する例となります。

Browsersyncのその他の設定など詳細については、文末の参考サイト内を確認してみてください。

参考サイトなど

BrowserSync | Laravel Mix Documentation