はじめに

expressを使ってBrowserSyncを使う記事が少なかったので書きます。
nodemon + BrowserSyncでブラウザノータッチの楽々コーディングを目指そう。

方法

expres側ファイルをnodemonで監視(3000portで起動)
BrowserSync を 4000 番ポートで起動、nodemonに接続

これによりクライアント側のファイルはBrowserSyncでブラウザをリロード
nodemonによるサーバ再起動は、再起動後にBrowserSync に通知してもらえるようにする。

前提

node + expressは導入済み
Nodeの側のポートは3000に指定

導入

browser-sync のインストール

$ npm install --save-dev browser-sync

インストールが終わってからbrowser-syncのコンフィグファイルを生成

$ npx browser-sync init

bs-config.jsが作られるので、以下のように一部を編集
プロキシをhttp://localhost:3000に指定することで連携可能。
今回はカスタムテンプレートにEJSを使用するために.ejsを指定しているが、適宜対応してください。

bs-config.js

  "files": [
    "**/*.js",
    "**/*.ejs",
    "**/*.css"
  ],
~中略~
  "proxy": "http://localhost:3000",
  "port": 4000,

次にnodemonのインストール

$ npm install -g nodemon

ここまでくればあとはどちらも起動するだけで終わりだが、どうせならまとめて起動したい。
ここでひと手間を加える。

npm-run-allのインストール

$ npm install --save-dev npm-run-all

package.jsonの編集（抜粋）

package.json

  "scripts": {
    "start": "npm-run-all --parallel start:*",
    "start:nodemon": "nodemon ./bin/www",
    "start:sync": "browser-sync start --config bs-config.js"
  },

あとはnpm startで楽々開発。

package.json の解説

動きますね！終わり！でもいいがnpm-run-allを使った記述が多少わかりずらいので解説

npm-run-allの詳しい挙動に関してはggってもらって・・・
npm-run-allはシーケンシャルとパラレルの二つの指定方法があります。

今回はparallelを指定しなければ、nodemon or browser-sync どちらかしか動きません。
nodemon も browser-syncも一度呼び出すと永続するので・・・

"start": "npm-run-all --parallel←コレ　start:*",

start:*に関しては後ろ２行の：以下を表しています。

 "start:nodemon←コレ": "nodemon ./bin/www",
 "start:sync←コレモ": "browser-sync start --config bs-config.js"

他にもいろいろ応用できそう。

[Node.js] express + nodemon + BrowserSync でゲボ楽コーディング

はじめに

方法

前提

導入

package.json の解説

参考記事