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

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

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

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

【npm】Browsersyncを利用しブラウザを自動更新

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

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

package.jsonを作成

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

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

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

npm init

Browsersyncをインストール

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

npm install browser-sync -D

ブラウザを自動更新

今回の例では、プロジェクト内のjs・css・phpファイルが更新されたら、ブラウザも自動更新します。

以下、インストールしたBrowsersyncを利用し、ブラウザを自動更新する例となります。

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...
[Browsersync] Reloading Browsers...

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

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

まとめ

以上がBrowsersyncを利用し、ブラウザを自動更新する例となります。

Browsersyncの利用方法の詳細ついては、以下の参考サイト内を確認してみてください。