npm-watch の使い方 - ゲーム作るくんのサイト

詳しくは公式の https://www.npmjs.com/package/npm-watch に書いてあるので、そこに書いてある通りに記述すればいいんですが、package.json の書き方が微妙に分かりづらかったのでまとめておきます。

npm-watch の概要

npm-watch は npm を使った開発の際にファイルを監視して、ファイルが変更されたら任意の npm scripts を自動で実行してくれる、というツールです。

私の場合は以下のような使い方をしています。

Markdown ファイルを変更した際に HTML 生成用のスクリプトを実行する

この記事は Markdown ファイルで書いているのですが、修正するたびに手動でスクリプトを実行して HTML ファイルを生成するのは面倒なので、そこの処理を npm-watch を使って自動化しています。

EJS ファイルを変更した際に HTML 生成用のスクリプトを実行する

同じく EJS ファイルも HTML の生成に使用しているため、npm-watch を使って HTML ファイルの生成を自動化しています。

Aseprite ファイルを変更した際に aseprite コマンドを実行して JSON ファイルを吐き出す

ゲームを作る際に Aseprite というドット絵作成ツールで絵を描いています。

Aseprite には画像のスライス情報等を JSON ファイルとして書き出すためのコマンドラインツールが付属しているのですが、npm-watch が Aseprite ファイルの変更を検知すると、自動的にそのコマンドを実行するように設定しています。

npm-watch のインストール

まずは npm-watch を npm コマンドでインストールしておきます。

※ 事前に Node.js のインストールが必要になります。

npm install npm-watch

npm-watch のための package.json の書き方

package.json ファイルの中身はこんな感じです。ファイルの前後は省略してあります。

"scripts": {
  "generate-html-files": "ts-node scripts/generate-html-files.ts",
  "watch": "npm-watch"
},
"watch": {
  "generate-html-files": {
    "patterns": [
      "docs", "ejs"
    ],
    "extensions": "ejs,md"
  }
}

generate-html-files.ts というファイルは自作の HTML 生成スクリプトです。ts-node コマンドで generate-html-files.ts を実行すると HTML ファイルが生成される、という作りになっています。

npm-watch の立ち上げ方

まず、以下のコマンドで npm-watch を立ち上げます。

npm run watch

このコマンドを実行すると、npm-watch は "scripts" 以下の "watch" というフィールドを見にいって、そこに書かれている通り npm-watch コマンドを実行します。

"scripts": {
  ...
  "watch": "npm-watch"
},

この部分ですね。

ちなみに、いきなり、

npm-watch

という感じで npm-watch コマンドを実行しても同じ結果になります。npm run watch で実行するのは、単に慣習というか、npm run foo という形にまとめることで分かりやすくするため、という目的です。

npm-watch の処理の流れ

npm-watch コマンドを実行すると、npm-watch は package.json の中に書かれた "watch" というフィールドを見にいきます。

今回の例で言うとこの部分ですね。

"watch": {
  "generate-html-files": {
    "patterns": [
      "docs", "ejs"
    ],
    "extensions": "ejs,md"
  }
},

この設定の意味ですが、

patterns フィールドで、docs ディレクトリと ejs ディレクトリ以下を監視するよう設定
extensions フィールドで、拡張子が ejs と md のファイルを監視するよう設定
上記の条件に該当するファイルが変更されたら generate-html-files という scripts を実行する

となります。

generate-html-files フィールドは以下のように設定されているので、

  "scripts": {
    "generate-html-files": "ts-node scripts/generate-html-files.ts",
    ...
  },

最終的に以下のコマンドが実行されて HTML ファイルが吐かれる、という流れになります。

ts-node scripts/generate-html-files.ts

ちなみに私の場合、npm-watch コマンド専用のターミナルを立ち上げておいて、思った通りにコマンドが自動実行されているか視界の隅に置いて作業しています。エラーが吐かれたときにすぐに気づけるように。

以上