ブラウザを自動更新|npmのBrowsersyncを利用する方法|仮想環境での設定
今回は、指定したファイルが更新されたら、ブラウザを自動更新できるnpmのパッケージ「Browsersync」を、仮想環境で利用する例となります。
また、npmはすでにインストールされている前提としています。npmのインストールやコマンドについては以下のリンク先を参考にしてみてください。
【npm】Browsersyncでファイル更新時にブラウザを自動リロード
例では、プロジェクト内のjs・css・phpファイルが更新されたら、ブラウザに表示したローカルサイトを自動更新します。
プロジェクト内にBrowsersyncをインストール
Browsersyncをプロジェクト内にインストールする方法となります。
package.jsonを作成
※すでにプロジェクト内でnpmを利用しpackage.jsonがある場合には、この手順は飛ばします。
プロジェクト内でnpmを配置するディレクトリ(npmのルート)にcdコマンドで移動します。
そして、以下のコマンドでpackage.jsonを作成します。
npm init -y
Browsersyncをインストール
npmのルートディレクトリで、以下のコマンドを実行しBrowsersyncをインストールします。
npm install browser-sync -D
Browsersyncの設定(bs-config.js)
Browsersyncの設定はbs-config.jsファイルで行います。
bs-config.jsの新規作成は、npmのルートディレクトリで次のコマンドを実行します。(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...
VSCodeでnpm-scriptsを実行する場合
コードエディタのVSCodeでは、npm-scriptsをサイドバーのメニューから簡単に実行できます。詳しくは以下のリンク先を参考にしてみてください。
スマホでブラウザを自動更新
スマホのブラウザで、ローカルサイトの自動更新を確認するには、ローカルネットワークに接続しているスマホで、上記のExternalのURLにアクセスします。
まとめ
以上がBrowsersyncを利用し、指定したファイルが更新されたら、ブラウザに表示したローカルサイトを自動更新する例となります。
Browsersyncのその他の設定など詳細については、文末の参考サイト内を確認してみてください。