Zenn
🛠️

npm scriptsでBrowsersyncによるローカルサーバーを起動する（bs-config.js、SSI）

2023/10/11に公開
npm
ssi
browsersync
tech

要件

  • htdocsディレクトリを対象にローカルサーバーを起動する
  • SSIにも対応可能にする

パッケージをインストールする

Browsersyncのパッケージをインストールします。

npm i -D browser-sync

SSI対応が必要な場合はbrowsersync-ssiも追加でインストールします。

npm i -D browsersync-ssi

クロスプラットフォームに対応して簡潔に記述できるnpm-run-allとファイルの監視機能があるonchangeもインストールします。

npm i -D npm-run-all onchange

ディレクトリ構造

以下のディレクトリ構造で構成しています。

.
├── bs-config.js
└── htdocs
  • bs-config.js：Browsersyncの設定ファイル

bs-config.jsを作成する

npx browser-sync initを実行するとbs-config.jsが作成されます。

bs-config.js

/*
 |--------------------------------------------------------------------------
 | Browser-sync config file
 |--------------------------------------------------------------------------
 |
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 |
 | There are more options than you see here, these are just the ones that are
 | set internally. See the website for more info.
 |
 |
 */
module.exports = {
    "ui": {
        "port": 3001
    },
    "files": false,
    "watchEvents": [
        "change"
    ],
    "watch": false,
    "ignore": [],
    "single": false,
    "watchOptions": {
        "ignoreInitial": true
    },
    "server": false,
    "proxy": false,
    "port": 3000,
    "middleware": false,
    "serveStatic": [],
    "ghostMode": {
        "clicks": true,
        "scroll": true,
        "location": true,
        "forms": {
            "submit": true,
            "inputs": true,
            "toggles": true
        }
    },
    "logLevel": "info",
    "logPrefix": "Browsersync",
    "logConnections": false,
    "logFileChanges": true,
    "logSnippet": true,
    "rewriteRules": [],
    "open": "local",
    "browser": "default",
    "cors": false,
    "xip": false,
    "hostnameSuffix": false,
    "reloadOnRestart": false,
    "notify": true,
    "scrollProportionally": true,
    "scrollThrottle": 0,
    "scrollRestoreTechnique": "window.name",
    "scrollElements": [],
    "scrollElementMapping": [],
    "reloadDelay": 0,
    "reloadDebounce": 500,
    "reloadThrottle": 0,
    "plugins": [],
    "injectChanges": true,
    "startPath": null,
    "minify": true,
    "host": null,
    "localOnly": false,
    "codeSync": true,
    "timestamps": true,
    "clientEvents": [
        "scroll",
        "scroll:element",
        "input:text",
        "input:toggles",
        "form:submit",
        "form:reset",
        "click"
    ],
    "socket": {
        "socketIoOptions": {
            "log": false
        },
        "socketIoClientConfig": {
            "reconnectionAttempts": 50
        },
        "path": "/browser-sync/socket.io",
        "clientPath": "/browser-sync",
        "namespace": "/browser-sync",
        "clients": {
            "heartbeatTimeout": 5000
        }
    },
    "tagNames": {
        "less": "link",
        "scss": "link",
        "css": "link",
        "jpg": "img",
        "jpeg": "img",
        "png": "img",
        "svg": "img",
        "gif": "img",
        "js": "script"
    },
    "injectNotification": false
};

必要に応じて、このファイルを変更していきます。
変更しない設定は削除してしまって問題ないようです。

よく使いそうな設定を説明します。

files

監視対象にするファイルやディレクトリを設定します。
変更されたら自動的にリロードされます。

bs-config.js
    "files": false,

次のようにglobで指定したり、["app/css/style.css", "app/js/*.js"]のように配列での指定も可能です。

bs-config.js
    "files": [
      "htdocs/**/*.{html,css,js}",
    ],

server

監視対象のディレクトリを設定します。

bs-config.js
    "server": false,

ディレクトリを1つ設定するだけOKです。

bs-config.js
    "server": "htdocs",

proxy

プロキシを設定します。
仮想環境のIP（"localhost:8080"など）を設定するとBrowsersyncの機能が使えるようです。

bs-config.js
    "proxy": false,

port

ポート番号を設定します。
同じ値のポートがすでに開いている場合は、自動的に別の番号で開いてくれます。

bs-config.js
    "port": 3000,

open

ローカルサーバーを自動的に開くかどうか、開く場合の方法を設定します。

bs-config.js
    "open": "local",
  • false：自動で開かない（ログに表示されるURLから開く）
  • "local"：localhostで開く
  • "external"：IPアドレスで開く

notify

ファイル更新時に表示される「Browsersync: connected」というポップオーバーの表示を切り替えます。

bs-config.js
    "notify": true,
  • true：ポップオーバーを有効にする
  • false：ポップオーバーを無効にする

startPath

ブラウザで開いたときのパスを設定します。

bs-config.js
    "startPath": null,

たとえば"/styleguide/"のように指定します。

SSIを設定する

SSIを使用する場合は、「browsersync-ssi」を使用します（似たライブラリに「connect-ssi」がありますが、大きくは違いがなさそう？）。

bs-config.jsにbrowsersync-ssiをrequireします。

bs-config.js
const ssi = require('browsersync-ssi')

middlewareの初期値は"middleware": false,となっていますが、次のように変更します。

bs-config.js
    "middleware": ssi({
      baseDir: 'htdocs',
      ext: '.html',
    }),
  • baseDir：serverと同じ値
  • ext：SSIを実行するファイルの拡張子（デフォルトは.shtml）

npm scriptsを設定する

Browsersyncに関連する処理だけを抜き出しています。

package.json
    "start": "run-s -c dev watch",
    "watch": "run-p watch:*",
    "watch:css": "onchange \"src/**/*.scss\" -- npm run dev:css",
    "watch:js": "onchange \"src/**/*.js\" -- npm run dev:js",
    "watch:serve": "browser-sync start --config \"./bs-config.js\"",
    "dev": "run-p dev:*",
  • devは開発用のビルドとしています
  • run-sは順番に実行、-cはエラーが起きても最後の処理まで止まらずに実行するオプションです
  • browser-sync start以降がオプション指定、--configオプションでbs-config.jsを設定ファイルとして指定します（bs-config.jsよりもコマンドラインが優先されるので注意）
  • Browsersyncはhtdocs内の指定ファイルが変更されたら自動更新されるので、watch:serveが実行され停止されない状態であればOK（watchにwatch:serveを含めているのは流れを分かりやすくするため）
  • 開発用のコマンドであるstartでdevコマンドがすべて実行されたら、watchコマンドが次に実行される

Discussion