Laravel-Mix, BrowserSyncで画面を自動リロードする方法

環境

	バージョン
macOS High Sierra	10.13.5
Laravel	5.5
HostOS Ubuntu	18.04 LTS

前提

Laravelのプロジェクトを作成。
https://readouble.com/laravel/5.5/ja/homestead.html

Laravel-Mixの導入はこちらを参考にしてください
https://readouble.com/laravel/5.5/ja/mix.html#running-mix

Laravel-Mixとは

Laravel-Mix(前, Laravel Elixir)とはwebpackの設定を簡単に行えるAPI.

Laravel-Mixの導入

npm install で導入完了.

webpack.mix.jsの記述

webpack.mix.jsに色々書くと, アセットをどうコンパイルすべきか設定する.

webpack.mix.js

mix.browserSync({
    host: 'hoge.test',
    proxy: {
        target: "http://hoge.test",
        ws: true
    },
    browser: "google chrome",
    files: [
       './**/*.css',
       './app/**/*',
       './config/**/*',
       './resources/views/**/*.blade.php',
       './resources/views/*.blade.php',
       './routes/**/*'
    ],
    watchOptions: {
      usePolling: true,
      interval: 100
    },
    open: "external",
    reloadOnRestart: true
});

browserSyncとはファイルの変更を監視し、変更があればブラウザをリロードしてくれるツール.

変更の監視

npm run watch-pollにより変更を監視する.

console

       Local: http://localhost:3000
    External: http://hoge.test:3000

このようなものがターミナルに表示される
このURLをブラウザで表示すると, アプリケーションをブラウザから確認できる.
ファイルに変更を加えると, ブラウザに変更が反映される.