package.jsonの設定について

プロジェクトの管理ファイルpackage.jsonについて解説します。
前々回の解説（Web制作の開発環境とファイル構成について）でサンプルデータとしてアップしたsample.zipにあるpackage.jsonを見ながら解説を読んでいただくとわかりやすいと思います。

package.jsonの解説と言っても、触れるのはscripts部分のみとします。
他の部分についてもし興味があれば、調べてみてください。

webpack.config.js

{
 "scripts": {
   "watch:server": "browser-sync start --config bs-config.js",
   "watch:webpack": "webpack --watch",
   "build": "webpack",
   "w": "npm-run-all -p watch:webpack watch:server"
  }
}

上がscripts部分になりますが、ここがnpm-scriptにあたるコードです。
設定しているスクリプト名は、"watch:server"、"watch:webpack"、"build"、"w"の4つです。
このスクリプトを実行するには、

npm run 'スクリプト名'

上のようなコマンドとなります。
前々回の解説（Web制作の開発環境とファイル構成について）で、

npm run build

上のコマンドを実行しました。
これは"webpack"を実行するスクリプトです。
"webpack"を実行すると、ファイルのコンパイルが行われます。

npm run w

続けて、上のコマンドを実行しました。
このスクリプトで"npm-run-all -p watch:webpack watch:server"が実行されました。
"npm-run-all -p [実行タスク] [実行タスク]"となり、"-p"は実行タスクを並列実行するオプションです。
これにより"watch:webpack watch:server"が並列実行されます。
"watch:webpack"のスクリプトは、"webpack --watch"が実行され、webpackを常に監視します。
これで該当のファイルが更新されるたび、"webpack"が実行されコンパイルされます。
"watch:server"のスクリプトでは、"browser-sync start --config bs-config.js"が実行されます。
browser-syncについては解説を割愛しますが、これは自動リロードの機能を持つパッケージで、設定ファイルはbs-config.jsファイルになります。
このbs-config.jsファイルでは、publicフォルダ内にあるhtmlファイル、cssファイル、jsファイルが監視対象になっています。

一連の流れは下のようになります。

1. 中間言語ファイル（pug, scss, ts）を更新する（作業する）
2. 中間言語ファイル（pug, scss, ts）を保存する
3. "webapck"が実行され、ファイルのコンパイルが行われ、ファイル（html, css, ts）が出力される。
4. browser-syncの監視対象ファイルが更新されたため、ブラウザがリロードされる。

以上が、package.jsonに記述されているscripts（npm-script）の解説になります。