BrowserSyncとは？

ソースコードを更新した際、いちいちブラウザのリロードをするのが面倒....ってときに導入する。
これを導入することで、ソースコードを編集し保存した際に自動でブラウザを書き換えてくれる。

前提

• Laradockを利用していること
• laravel-mixを利用していること

使い方

1. BrowserSyncをインストール
2. webpack.mix.jsの書き換え
3. npm run watch 実行
4. アクセス

1. BrowserSyncをインストール

npmパッケージをインストールする必要がある。
入れるものがわからない場合、とりあえずこの項目を飛ばして2番, 3番を実行すると、npm run watchで通知が出るのでそれを実行。

npm i browser-sync browser-sync-webpack-plugin@^2.3.0 --save-dev --legacy-peer-deps

2. webpack.mix.jsの書き換え

webpack.mix.jsに、以下の記述を追記する。

const mix = require('laravel-mix')

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.sass', 'public/css')

// ↓↓↓以下追記↓↓↓
    .browserSync({
        notify: true, // 同期時にブラウザ右上に通知が出る
        proxy: 'project-laradock-nginx-1', // nginxのコンテナ名か、nginxコンテナのIPを記述
        host: 'localhost', // ホスト名を記述、基本localhostで良いはず
        open: false, // 自動的にページが開くようになる
        files: [
            'resources/**/*', // 監視対象
        ]
    })
// ↑↑↑追記終↑↑↑

3. npm run watch 実行

これで変更を監視できる。

npm run watch

4. アクセス

http://localhost:3000でアクセスする。
http://localhost:3001で、BrowserSyncの設定等変更出来る。

良いプログラミングライフを！