ブラウザを自動更新｜npmのBrowsersyncを利用する方法｜仮想環境での設定

今回は、指定したファイルが更新されたら、ブラウザを自動更新できるnpmのパッケージ「Browsersync」を、PHPプロジェクトなどの仮想環境で利用する例となります。

また、今回の例ではnpmはすでにインストールされている前提としています。nmpのインストールやコマンドについては以下のリンク先を参考にしてみてください。

npmのコマンドまとめ｜パッケージのインストール・削除・確認など【Node.js】

【npm】Browsersyncでファイル更新時にブラウザを自動リロード

今回の例では、プロジェクト内のjs・css・phpファイルが更新されたら、ブラウザを自動更新します。以下、Browsersyncを利用する方法となります。

プロジェクト内にBrowsersyncをインストール

以下、npmのBrowsersyncをプロジェクト内にインストールする方法となります。

package.jsonを作成

※すでにプロジェクト内でnmpを利用しpackage.jsonがある場合には、この手順は飛ばします。

まず、プロジェクト内でnpmを配置するディレクトリ（npmのルート）にcdコマンドで移動します。

そして、以下のコマンドでpackage.jsonを作成します。

npm init

Browsersyncをインストール

次に、プロジェクト内のnpmのルートディレクトリで、以下のコマンドを実行しBrowsersyncをインストールします。

npm install browser-sync -D

Browsersyncの設定（bs-config.js）

Browsersyncの設定はbs-config.jsファイルで行います。

今回の例ではnpmのルートディレクトリで、以下のコマンドを実行しbs-config.jsを新規作成します。

また、以下のnpxコマンドは、ローカルにインストールしたnpmパッケージを実行できるコマンドとなります。

npx browser-sync init

上記コマンドで作成したbs-config.jsファイル内には、デフォルト設定がオブジェクトで指定されていますが、今回の例の設定を適用するため修正します。

修正箇所は以下の2箇所となり、オブジェクトのキーが"files"と"proxy"の値となります。

"files": [
	"**/*.js",
    "**/*.css",
    "**/*.php",
],

"proxy": "localhost",

"files"の値には、配列で任意のファイルを指定します。それにより、指定したファイル更新時にブラウザが自動リロードします。今回の例では、プロジェクト内のすべてのjs・css・phpファイルを指定しています。

"proxy"の値には、プロジェクトの仮想環境で利用しているローカルURLを指定します。今回の例ではlocalhostを指定しています。

npm-scriptsを利用しファイルの監視をスタート

npmでは、npm-scriptsを利用することで、シェルスクリプトやコマンドをスクリプトとして定義し実行できます。

今回の例では、そのnpm-scriptsを利用しBrowsersyncコマンドを実行するため、まず、以下のようにpackage.jsonファイル内の"scripts"の値を追加し、スクリプトを定義します。

"scripts"の値はオブジェクトとなり、キーにスクリプト名を指定し、値に実行するコマンドを指定します。

"scripts": {
	"bs": "browser-sync start --config bs-config.js"
}

そして、npm-scriptsで定義したスクリプトを、以下のコマンドで実行します。

npm run bs

それにより、指定したファイルの監視をスタートします。また、ブラウザには、ファイル更新時に自動リロードするローカルサイトが表示されます。

CLI画面には以下のような結果が表示されますが、LocalとExternalのURLがブラウザの自動更新をするローカルサイトのアドレスとなります。

[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 -------------------------------------------
       Local: http://localhost:3000
    External: http://192.168.XX.XXX:3000
 -------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------------
[Browsersync] Watching files...

スマホでブラウザを自動更新

また、スマホでブラウザの自動更新を利用しローカルサイトを確認する場合には、ローカルネットワークに接続しているスマホで、上記表示結果のExternalのURLにアクセスします。

まとめ

以上がBrowsersyncを利用し、指定したファイルが更新されたらブラウザを自動更新する例となります。

Browsersyncのその他の設定など詳細については、文末の参考サイト内を確認してみてください。