はじめに
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"
他にもいろいろ応用できそう。