Posted at

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

More than 1 year has passed since last update.

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でアクセスすると自動リロード出来なかった。

本当はポート番号なしでアクセスしても自動リロード出来て欲しいのですが、、、、

やり方が分かったら追記します。

以上。