concurrently + nodemon でファイル変更を自動ビルド

課題

Markdown ファイルをビルドして管理するプロジェクトを開発しているとする。

例えば、Markdown ファイルを articles/ ディレクトリに配置し、ビルド時に npm run build:article コマンドで JSON ファイルに変換する、といった構成。

しかし、npm run dev で開発サーバーを起動している状態でファイルを編集しても、自動的にビルドが走らない。

そのため、ファイルを編集するたびに以下の手順を踏む必要がある：

1. ファイル（.md）を編集
2. ターミナルで npm run build:article を手動実行
3. ブラウザをリロードして確認

これが非常に面倒。

Vite のホットリロードは動いているので、コンポーネントやスタイルの変更はすぐに反映されるのに、特定のファイルだけは手動ビルドが必要という状況。

ファイルを編集しながらプレビューを確認する作業が苦痛になる。

解決策

ファイルの変更を監視して、自動的にビルドコマンドを実行するようにした。

そのために、以下の2つのパッケージを導入した：

• concurrently: 複数のコマンドを並行実行
• nodemon: ファイル監視してコマンドを自動実行

concurrently とは

GitHub - open-cli-tools/concurrently: Run commands concurrently. Like `npm run watch-js & npm run watch-less` but better.

Run commands concurrently. Like `npm run watch-js & npm run watch-less` but better. - open-cli-tools/concurrently

github.com

concurrently は、複数のコマンドを並行して実行できるパッケージ。

通常、npm run で複数のコマンドを実行したい場合、&& で繋ぐと順次実行になってしまう：

# dev コマンドが終了するまで watch:article は実行されない
npm run dev && npm run watch:article

しかし、開発サーバーは終了しないプロセスなので、これだと watch:article が永遠に実行されない。

concurrently を使えば、複数のコマンドを同時に起動できる：

concurrently "npm run dev" "npm run watch:article"

これにより、開発サーバーとファイル監視を同時に動かすことができる。

nodemon とは

GitHub - remy/nodemon: Monitor for any changes in your node.js application and automatically restart the server - perfect for development

Monitor for any changes in your node.js application and automatically restart the server - perfect for development - remy/nodemon

github.com

nodemon は、ファイルの変更を監視して、自動的にコマンドを再実行してくれるパッケージ。

Node.js アプリケーションの開発でよく使われる。サーバーのコードを変更したら自動的に再起動してくれる、というのが主な用途。

今回は、Markdown ファイル（.md）の変更を監視して、ビルドコマンドを自動実行するために使用する。

nodemon --watch <監視対象> --ext <拡張子> --exec "<実行コマンド>"

nodemon --watch articles --ext md --exec "npm run build:article"

実装

package.json に以下の変更を加えた。

npm install -D concurrently nodemon

{
  "scripts": {
    "dev": "npm run build:article && concurrently \"vite dev\" \"npm run watch:article\"",
    "watch:article": "nodemon --watch articles --ext md --exec \"npm run build:article\"",
    "build:article": "node scripts/build-articles.js"
  }
}

"dev": "npm run build:article && vite dev"

"dev": "npm run build:article && concurrently \"vite dev\" \"npm run watch:article\""

"watch:article": "nodemon --watch articles --ext md --exec \"npm run build:article\""

動作の流れ

1. npm run dev を実行
2. 初回の build:article が実行される
3. concurrently が起動し、以下2つが並行実行される：
   • vite dev: Vite 開発サーバー
   • npm run watch:article: nodemon によるファイル監視
4. articles/*.md を編集・保存
5. nodemon が変更を検知し、自動的に build:article を実行
6. Vite がビルド結果の変更を検知し、ホットリロード

これで、ファイルを編集するだけで自動的にブラウザに反映されるようになった。

まとめ

concurrently と nodemon を組み合わせることで、ファイル編集時の開発体験を大幅に改善できた。

手動でビルドコマンドを叩く手間がなくなり、コンテンツ作成に集中できるようになった。

同じように、ビルドステップが複数あるプロジェクトで同様の問題に直面している場合、この2つのパッケージの組み合わせは非常に有効だと思う。

特に、静的サイトジェネレーターやドキュメントサイトなど、コンテンツファイルを別途ビルドする必要があるプロジェクトでは活用できそう。