今回はBrowsersyncを使って、Laravelの開発効率化を目指します。

Browsersyncとは

ファイルの変更を監視・検知して自動でブラウザをリロードしてくれるNode.jsのモジュールです。

Node.jsモジュールなのでNode.jsが稼働する環境が必須です。

【参考】普通の使い方

1. npm install -g browser-syncでBrowsersyncをグローバルインストール
2. 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が稼働します。

参考記事