今回は、指定したファイルが更新されたら、ブラウザを自動更新できるnpmのパッケージ「Browsersync」を、仮想環境で利用する例となります。npmはすでにインストールされている前提としています。npmのインストールやコマンドについては以下のリンク先を参考にしてみてください。【npm】Browsersyncでファイル更新時にブラウザを自動リロードプロジェクト内にBrowsersyncをインストールBrowsersyncの設定(bs-config.js)npm-scriptsを利用しファイルの監視をスタートスマホでブラウザを自動更新まとめ参考サイトなど【npm】Browsersyncでファイル更新時にブラウザを自動リロード例では、プロジェクト内のjs・css・phpファイルが更新されたら、ブラウザに表示したローカルサイトを自動更新します。プロジェクト内にBrowsersyncをインストールBrowsersyncをプロジェクト内にインストールする方法となります。※すでにプロジェクト内でnpmを利用しpackage.jsonがある場合には、この手順は飛ばします。プロジェクト内でnpmを配置するディレクトリ(npmのルート)にcdコマンドで移動します。以下のコマンドでpackage.jsonを作成します。-yBrowsersyncをインストールnpmのルートディレクトリで、以下のコマンドを実行しBrowsersyncをインストールします。-DBrowsersyncの設定(bs-config.js)Browsersyncの設定はbs-config.jsファイルで行います。bs-config.jsの新規作成は、npmのルートディレクトリで次のコマンドを実行します。(npxコマンドでローカルにインストールしたnpmパッケージを実行します。init作成したbs-config.jsファイル内には、デフォルト設定がオブジェクトで指定されていますが、今回の設定を適用するため修正します。修正箇所は以下の2箇所となり、オブジェクトのキーが"files"と"proxy"の値となります。"localhost","files"の値には、配列で任意のファイルを指定します。それにより、指定したファイル更新時にブラウザが自動リロードします。例では、プロジェクト内のすべてのjs・css・phpファイルを指定しています。"proxy"の値には、プロジェクトの仮想環境で利用しているローカルURLを指定します。例ではlocalhostを指定しています。npm-scriptsを利用しファイルの監視をスタートnpmでは、コマンドをnpm-scriptsとして定義して実行できます。例では、そのnpm-scriptsを利用しBrowsersyncコマンドを実行するため、次のようにpackage.jsonファイル内の"scripts"の値を追加します。"scripts"の値はオブジェクトとなり、キーに任意のコマンド名を指定し、値に実行するコマンドを指定します。bs-config.js"}そして、定義したnpm-scriptsを、以下のコマンドで実行します。bsそれにより、指定したファイルの監視をスタートし、自動更新するローカルサイトがブラウザに表示されます。CLI画面には以下のような結果が表示されますが、LocalとExternalのURLが自動更新をするローカルサイトのアドレスとなります。files...VSCodeでnpm-scriptsを実行する場合コードエディタのVSCodeでは、npm-scriptsをサイドバーのメニューから簡単に実行できます。詳しくは以下のリンク先を参考にしてみてください。【VSCode】npm-scriptsをサイドバーから実行する方法|表示・非表示の設定スマホでブラウザを自動更新スマホのブラウザで、ローカルサイトの自動更新を確認するには、ローカルネットワークに接続しているスマホで、上記のExternalのURLにアクセスします。まとめ以上がBrowsersyncを利用し、指定したファイルが更新されたら、ブラウザに表示したローカルサイトを自動更新する例となります。Browsersyncのその他の設定など詳細については、文末の参考サイト内を確認してみてください。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。