LaravelでBrowsersyncを使ってBladeでのフロント開発を加速させる

公開日: 2019/10/26

Browsersyncのサイトのトップページ

LaravelでBladeファイルのホットリロードを実現する

Laravelでフロントの画面を開発する際に、ホットリロードを使えると便利ですよね。

ホットリロードは指定したファイルを監視し、ファイルの内容に変更があると、わざわざブラウザをリロードをしなくても変更が自動で反映される機能です。

Tailwind CSSやBootstrapでは、HTMLタグのクラス名を変えるだけで適用されるCSSが変わるので、ホットリロードが使えると開発スピードを加速させることができます。

元々Laravelには、JavaScriptやCSSファイルの変更を検知するWebpackのホットリロードの機能が既に組み込まれています。

$ npm run hotというコマンドでホットリロードを利用できます。

一方、Blade(PHPのテンプレートエンジン)ファイルはwebpackのファイル監視の対象外です。

このため、Bladeを使ってフロント画面を作成するにあたり、ホットリロードを実現するためにはBrowsersyncというnpmモジュールを導入します。

Browsersyncを使うことで、bladeファイルを変更して保存をしただけで、ブラウザに変更が即時反映されます。

これにより、いちいちブラウザで更新ボタンを押す(あるいはcommand + Rをする)手間が省けます。

Browsersyncを導入する方法

Laravelのプロジェクトルートで$ npm install -S browser-sync browser-sync-webpack-pluginを実行します。

$ npm install -S browser-sync browser-sync-webpack-plugin
+ browser-sync-webpack-plugin@2.2.2
+ browser-sync@2.26.7
added 146 packages from 143 contributors and audited 20798 packages in 14.919s
found 0 vulnerabilities

インストールに成功しました。

webpack.mix.jsに設定を追加する

webpack.mix.jsにBrowsersyncの設定を追加します。

mix.browserSync({
    proxy: {
        target: "http://127.0.0.1:8000",
    },
    files: [
        'resources/views/**/*.blade.php',
    ],
});

Browsersyncのプロキシモードを利用して、PHPが動作しているローカルサーバーを監視対象にしています。

この他にも設定のoptionは存在しますが、最低限これだけあれば動作します。

以下でオブジェクトの各フィールドの解説をします。

proxyにローカルサーバーのアドレスを記述する

proxyのtargetフィールドには、開発中のローカルサーバーのアドレスを記述しましょう。

Laravelはartisan serveコマンドを使ってローカルサーバーを立ち上げることができるので、このアドレスを記述すると良いでしょう。

$ php artisan serve
Laravel development server started: http://127.0.0.1:8000

DockerやHomesteadを使っていてアドレスが異なる場合は、targetのアドレスを書き換えてくださいね。

filesに変更を監視するファイルパスを記述する

filesには配列で監視対象のファイルパスを記述します。

今回はresources/views配下の全てのbladeファイルを監視対象にしています。

ホットリロードの実行方法

ここまでくると、あとは下記のコマンドを実行するだけです。

  1. $ php artisan serveを実行する(もしくは、ローカルサーバーを立ち上げる)
  2. $ npm run watchを実行する
$ npm run watch

       Asset     Size   Chunks             Chunk Names
/css/app.css  814 KiB  /js/app  [emitted]  /js/app
  /js/app.js  591 KiB  /js/app  [emitted]  /js/app
[Browsersync] Proxying: http://127.0.0.1:8000
[Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000
    External: http://192.168.100.128:3000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------
[Browsersync] Watching files...

開発画面が立ち上がれば成功です。

パソコンとスマホのサイズでの画面同時確認でレスポンシブ対応を加速させる

なお、パソコンの画面幅のブラウザとスマホの画面幅のブラウザを同時に立ち上げることにより、レスポンシブデザインでのサイト構築がとても便利になります。

画面幅が変わることによるデザイン崩れを早期に発見できるからです。

同じwebページをパソコンとスマホの画面サイズで確認している

しかも、Browsersyncはデフォルトで複数のブラウザの動作を同期しています。

例えばスマホの画面幅で表示しているページを操作するだけで、もう一方の画面も自動で同様の動作をするため、ブラウザ操作の二度手間が省けるんです。

Browsersyncの設定画面

Browsersyncの設定はhttp://localhost:3001で確認・変更できます。

手元のスマホで開発画面を確認する

また、Externalの行に表示されているアドレス(上記ではhttp://192.168.100.128:3000)には、同一ネットワーク上の端末ならどれでもアクセスできます。

例えば、パソコンも自分のスマホも家のwi-fiに接続している場合、スマホでこのアドレスにアクセスすると、Laravelで開発中の画面を表示できます。

デプロイ不要でPC以外の端末から確認できるのはとても便利ですね。

Happy Coding 🎉