Posted at

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

More than 1 year has passed since last update.


環境

バージョン

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をブラウザで表示すると, アプリケーションをブラウザから確認できる.

ファイルに変更を加えると, ブラウザに変更が反映される.