npm-scriptsを使ってみる

npm scriptsとは

package.jsonのscriptに書いてある下記のようなやつ。
(下のは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 テスト

テスト

おまけ

yarnの場合はrunを省略できる。

$ yarn echo
> yarn run v1.17.3
> $ echo テスト
> テスト
> ✨  Done in 0.14s.

# 省略しなくても動く
$ yarn run echo
> yarn run v1.17.3
> $ echo テスト
> テスト
> ✨  Done in 0.15s.

予約語

基本的には上記使い方で問題ないが、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はコピーコマンドの代替。
rimrafはrm -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/"
}

Scriptに引数を渡す

スクリプトを書いた際に、動的に変えたい部分もあると思う。
スクリプトに引数を渡すにはnpm run スクリプト名 -- 引数とすれば良い。
ただし、渡した引数は後ろにくっつくので途中に埋め込みたいとかは無理(なはず)。

"scripts": {
  "test-touch": "touch"
}

$ npm run test-touch -- hoge.txt
> touch "hoge.txt"
> hoge.txtが作成される

おまけ

yarnの場合--をつけなくても引数を渡せる。
他はnpmのときと同じ。

$ yarn test-touch hoge.txt
> 結果は同じなので省略

まとめ

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

参考サイト

公式