🎃

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

2020/09/19に公開

npm-scripts

Zenn CLI

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

仕組み

Discussion