水無瀬のプログラミング日記

プログラムの勉強した時のメモ

npm-scriptsを使ってみる

npm scriptsとは

package.jsonscriptに書いてある下記のようなやつ。
(下のはnpm initの初期値)

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

事前準備

便利そうなやつがデフォルトで使えないから、先に入れておく。

# スクリプトの直列、並列実行をするために必要
npm install --save-dev npm-run-all
# ファイルの監視をして何かをするために必要
npm install --save-dev watch
# クロスプラットフォーム用(コピー,リムーブの代用)
npm install --save-dev cpx
npm install --save-dev rimraf

書けること

shell(bat),alias,scriptsに書いた自分以外のスクリプトが動かせる。
ターミナル(コマンドプロンプト)で動くものは基本的に動くと思われる。

使い方

基本的にはnpm run {script名}でOK。
以下、scriptの例と実行結果サンプル。

"scripts": {
  "echo": "echo テスト"
}
$ npm run echo
> hoge@1.0.0 echo /test
> echo テスト

テスト

予約語

基本的には上記使い方で問題ないが、4種類の予約後が用意されている。
start,stop,restart,testの4つが予約語となっており、npm startのようにrunを書かなくても実行できる。

  "scripts": {
    "start": "echo run省略"
  }
$ npm start
> hoge@1.0.0 start
> echo run省略

run省略

クラスプラットフォーム向け

scriptはシェルなり、ターミナルコマンドなりを使うことができる。
package.jsonに書くことはできるが当然ウインドウズでは動かないので、そこを解消する。
下記jsonのうち、cpxはコピーコマンドの代替。
rimrafrm -rfの代替となる。
※実行結果は元のコマンドと同じなので省略。

  "scripts": {
    "copy": "cpx ./text.txt ./text2.txt",
    "clean": "rimraf ./dist"
  }

直列実行

2つのscriptsを直列実行したいときは、
run-s {コマンド1} {コマンド2}でコマンド1の結果を待ってコマンド2を実行できる。
例えばビルドして結果をどこかにコピーしたいとき。
以下のようなスクリプトを用意しておくと救われる。
(例はAngular-cli利用した時のもの)

"script": {
    "all": "run-s build copy"
    , "build": "ng build"
    , "copy": "cpx ./dist/* ../server/"
}

並列実行

2つの複数のスクリプトを走らせたいときは、
run-p {コマンド1} {コマンド2}でコマンド1と2を同時に実行できる。
パッと用途が思いつかなかった。下記例だと、2種類のビルドを同時に実行している。

"script": {
    "parallel": "run-p build:tsc build:angular"
    , "build:tsc": "tsc test.ts"
    , "build:angular": "ng build"
}

監視

ファイルの変更検知して自動でビルドしたいときは、
npm run watch {コマンド} {監視対象}で監視対象の変更を検知してコマンドを実行できる。
使い方としては、開発中にホットデプロイのようなことをしたい場合。
ローカルで開発中にいちいちビルドと再起動を行わなくて済むので便利。
下記例はビルドからサーバにファイルを配置、サーバを起動ということをしている。
※フォルダ構成やファイル名は適当に記述

"script": {
    "watch": "watch \"npm run start:app\" ./src",
    "start:app": "run-s build boot:server",
    "boot:server": "nodemon ./app.js",
    "build": "run-s build:app copy",
    "build:app": "ng build",
    "copy": "cpx ./dist ../server/"
}

まとめ

以上npm-scriptの簡単な説明でした。
nodeを使うアプリであれば、おそらくpackage.jsonnpmはあると思うのでとっかりとしては始めやすい方だと思います。
スクランナーとして使ってる方もいるみたいなので是非使ってみてはいかがでしょうか。

参考サイト

公式