tech. tt

Teens Town 技術ブログ

Browsersync on Laravel!!

今回は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が稼働します。

【補足】Browsersyncがエラーを吐くとき
browser-syncモジュールのバージョンが2.26.xの場合、エラーとなる状況が確認されています。 対症療法的ですがbrowser-syncのバージョンを2.25.0に落とすと正常に稼働しました。

参考記事

https://qiita.com/tomo77777/items/5268eab2e98c7d1d4ad5