ロゴ

Gulpを使わずにBrowserSyncを設定してホットリロードを実現する方法

※本ページはプロモーションが含まれています

BrowserSync

Web制作で、ブラウザのホットリロードを実現するためにBrowserSyncを使っているのですが、タスクランナーのGulpを使わなくても使えたのでその手順をメモ。

BrowserSyncを設定

BrowserSyncを使うにはnode.jsが必要なので、先にインストール。

Windowsのnodeバージョンマネージャーのnvm-windowsをインストールする方法

インストールが完了したら、コマンドラインツールでプロジェクトのフォルダに移動。

cd path/to/project

プロジェクトの初期化。

npm init -y

BrowserSyncのインストール。

npm install --save-dev browser-sync

設定ファイルの「bs-config.js」を作成。

npx browser-sync init

「bs-config.js」の編集。記述量が多いので、変更したところだけ。

module.exports = {
    // 監視するファイルを設定
    "files": [
        "css/*.min.css",
        "**/*.php"
    ],
    // サーバ起動時にブラウザが開く設定をオフにする
    "open": false,
    // proxyの設定
    proxy: "localhost:8080",
};

package.jsonにBrowserSyncの起動スクリプトを追加

{
  // ・・・省略
  "scripts": {
  // ・・・省略
    "server": "browser-sync start --config \"./bs-config.js\""
  },
  // ・・・省略
}

BrowserSyncの実行。

 npm run server

これで下記URLにアクセスすればホットリロードが効いているページが開く。

http://localhost:3000

おわりに

以前はGulpを使ってBrowserSyncを使っていましたが、管理が面倒だったので、BrowserSync単体で動かせて良かったです。