BrowserSync
laravel5
laravelMix

LaravelMix + browserSyncでファイル編集時に自動リロードを行うための設定

Laravelのドキュメントを見ながら設定を行ったが、
全然設定内容が足りなかったので、実際に動作した設定内容を記載します。

(参考)
https://readouble.com/laravel/5.4/ja/mix.html

■ドキュメントの内容

Laravelのドキュメントを見ると、以下の設定をするだけで自動リロードが出来るかのように記載されている。

// webpack.mix.js
mix.browserSync('my-domain.dev');

// もしくは

// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.dev'
});

しかし、これだけ記載した上でnpm run watchもしくはnpm run watch-pollしてもそもそもファイルの編集自体読み取れていないようだった。

■設定内容

browserSyncのドキュメントを見ながら必要そうな設定内容足しました。
(参考)
https://www.browsersync.io/docs/options

mix.browserSync({
    host: 'homestead.app',
    proxy: {
        target: "http://homestead.app",
        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
});

この設定でnpm run watch-pollを実行すると、
こんな感じのメッセージが出てくる。

[BS] Proxying: http://homestead.app
[BS] Access URLs:
---------------------------------------
       Local: http://localhost:3000
    External: http://homestead.app/:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://homestead.app:3001
 ---------------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

最後の行でブラウザをひらけなかった、と言われているが、自動リロードはちゃんと動作しました。
最初にブラウザでページを開く作業だけ必要。
ページを開くときはhttp://homestead.app:3000でアクセスする必要があります。
ここをhttp://homestead.appでアクセスすると自動リロード出来なかった。

本当はポート番号なしでアクセスしても自動リロード出来て欲しいのですが、、、、
やり方が分かったら追記します。

以上。