Browsersync on Laravel!!
今回はBrowsersyncを使って、Laravelの開発効率化を目指します。
Browsersyncとは
ファイルの変更を監視・検知して自動でブラウザをリロードしてくれるNode.jsのモジュールです。
https://www.browsersync.io/
Node.jsモジュールなのでNode.jsが稼働する環境が必須です。
【参考】普通の使い方
npm install -g browser-sync
でBrowsersyncをグローバルインストールbrowser-sync start --server --files " ... 監視対象 ... "
を実行
と、手軽に実装できます。
もっとも、基本はプロジェクト内に導入し&package.jsonでコマンド化しておくのがベターかと思います…。
Laravelでの実装
Laravelでこの機能を使うには同じくNodeモジュールであるLaravel Mixを導入する必要があります。これはLaravelインストール時に生成されるpackage.jsonにあらかじめ記載されていますのでnpm install
で導入しましょう。
その後webpack.mix.js
に下の内容を追記します。
mix.browserSync({
host: "test.serv",
port: 3000,
proxy: {
target: "http://test.local",
ws: true
},
browser: "google chrome",
files: [
'./**/*.css',
'./app/**/*',
'./config/**/*',
'./resources/views/**/*.blade.php',
'./resources/views/*.blade.php',
'./routes/**/*'
],
watchOptions: {
usePolling: true,
interval: 100
},
open: "local",
reloadOnRestart: true,
advanced: {
browserSync: {
logLevel: 'debug',
},
},
});
最後にnpm run watch
で無事にBrowsersyncが稼働します。
参考記事
https://qiita.com/tomo77777/items/5268eab2e98c7d1d4ad5