Browser-syncとnpm-run-allでzenn-cliのプレビューをホットリロードさせる

公開:2020/09/19
更新:2020/10/02
1 min読了の目安(約900字TECH技術記事

追記
対応したみたいです


すでに同様の記事がありましたが途中まで書いちゃったので公開しちゃいます。

こんな感じで保存時に再読み込みさせることができます。

package.json の中身はこんな感じです。

  "scripts": {
    "start": "npm-run-all -p watch:*",
    "watch:zenn": "zenn preview -p 8000",
    "watch:sync": "browser-sync start --port 8080 --files \"articles/\" --no-open --proxy \"http://localhost:8000\"",
    "new": "zenn new:article --published false"
  },
  "devDependencies": {
    "browser-sync": "^2.26.12",
    "npm-run-all": "^4.1.5",
    "zenn-cli": "^0.1.22"
  }

上記の内容をコピーした後に次のコマンドで試すことができます。

npm i
npm start

仕組み

  • npm-run-all で zenn-cli と browser-sync を同時に実行
  • browser-sync のプロキシ機能で zenn-cli のプレビューを browser-sync 上から表示
  • browser-sync の機能で articles 以下を監視し再読み込み

npm-run-all と browser-sync を組み合わせることで他に設定ファイル等を用意せずにホットリロードを再現できて便利ですので是非お試しください。