npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。
前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。
今回はファイル更新を感知して自動更新されるように設定します。
watchコマンドを設定する
前回同様package.jsonのscriptの項目内にファイル更新感知（watch）コマンドを用意します。
"watch:html": "chokidar \"src/**/*.njk\" -c \"npm run build\"" ↑srcディレクトリ内の拡張子njkのファイルが更新されたらnpm run build:htmlコマンドを発動します
"watch:stylus": "stylus -w src/stylus/style.styl -o dist/css/style.css"↑stylusコマンドにwatchオプションをつけてstyle.stylファイルをdist/css/style.cssにコンパイルします
"watch:js": "chokidar \"src/**/*.js\" -c \"npm run build:js\""↑src内のjsファイルに変更があればnpm run build:jsを実行します
"watch": "run-p watch:*"↑watch:html,watch:stylus,watch:jsを並列で処理します。
これで各ファイルの変更を感知して変更があれば関連するタスクを発動します。
browser-syncを設定して更新確認を簡単にする
修正の確認はdistフォルダ内のhtmlファイルをブラウザで表示すれば確認できます。
しかし、これだとファイルを更新したときにブラウザを都度更新しなければいけません。
ファイル更新後、自動で変更が反映されページもリロードされるbrowserSyncを導入します。
npx browser-sync init↑このコマンドでbs-config.jsという設定ファイルが生成されます
bs-configを調整して引き続きnpm-scriptsの方に記入します。
"server": "browser-sync start --config bs-config.js"このserverコマンドをさきほど作成したwatchコマンドに追加します。
"watch": "run-p watch:* server"↓ファイル更新感知タスクができたので開発用コマンドをまとめます
"dev": "run-s clean build watch"直列処理で①distフォルダを一旦削除②html,css,jsを再構築③ファイル変更を感知状態にしています。
これでファイル更新を感知しbrowser-syncで立ち上がった仮サーバーで更新内容をブラウザの更新ボタンを押さずに確認できるようになりました。
画像まわりの処理が抜けているので次回設定します。
次回に続く