1. minase_tetsuya

    No comment

    minase_tetsuya
Changes in body
Source | HTML | Preview
@@ -1,146 +1,163 @@
# npm scriptsとは
package.jsonの`script`に書いてある下記のようなやつ。
(下のは`npm init`の初期値)
```json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
```
# 事前準備
便利そうなやつがデフォルトで使えないから、先に入れておく。
```sh
# スクリプトの直列、並列実行をするために必要
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の例と実行結果サンプル。
```json
"scripts": {
"echo": "echo テスト"
}
```
```sh
$ npm run echo
> hoge@1.0.0 echo /test
> echo テスト
テスト
```
+### おまけ
+`yarn`の場合は`run`を省略できる。
+
+```sh
+$ yarn echo
+> yarn run v1.17.3
+> $ echo テスト
+> テスト
+> ✨ Done in 0.14s.
+
+# 省略しなくても動く
+> yarn run v1.17.3
+> $ echo テスト
+> テスト
+> ✨ Done in 0.15s.
+```
+
## 予約語
基本的には上記使い方で問題ないが、4種類の予約後が用意されている。
`start`,`stop`,`restart`,`test`の4つが予約語となっており、`npm start`のようにrunを書かなくても実行できる。
```json
"scripts": {
"start": "echo run省略"
}
```
```sh
$ npm start
> hoge@1.0.0 start
> echo run省略
run省略
```
## クラスプラットフォーム向け
scriptはシェルなり、ターミナルコマンドなりを使うことができる。
`package.json`に書くことはできるが当然ウインドウズでは動かないので、そこを解消する。
下記jsonのうち、`cpx`はコピーコマンドの代替。
`rimraf`は`rm -rf`の代替となる。
※実行結果は元のコマンドと同じなので省略。
```json
"scripts": {
"copy": "cpx ./text.txt ./text2.txt",
"clean": "rimraf ./dist"
}
```
## 直列実行
2つのscriptsを直列実行したいときは、
`run-s {コマンド1} {コマンド2}`でコマンド1の結果を待ってコマンド2を実行できる。
例えばビルドして結果をどこかにコピーしたいとき。
以下のようなスクリプトを用意しておくと救われる。
(例はAngular-cli利用した時のもの)
```json
"script": {
"all": "run-s build copy"
, "build": "ng build"
, "copy": "cpx ./dist/* ../server/"
}
```
## 並列実行
2つの複数のスクリプトを走らせたいときは、
`run-p {コマンド1} {コマンド2}`でコマンド1と2を同時に実行できる。
パッと用途が思いつかなかった。下記例だと、2種類のビルドを同時に実行している。
```json
"script": {
"parallel": "run-p build:tsc build:angular"
, "build:tsc": "tsc test.ts"
, "build:angular": "ng build"
}
```
## 監視
ファイルの変更検知して自動でビルドしたいときは、
`npm run watch {コマンド} {監視対象}`で監視対象の変更を検知してコマンドを実行できる。
使い方としては、開発中にホットデプロイのようなことをしたい場合。
ローカルで開発中にいちいちビルドと再起動を行わなくて済むので便利。
下記例はビルドからサーバにファイルを配置、サーバを起動ということをしている。
※フォルダ構成やファイル名は適当に記述
```json
"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 スクリプト名 -- 引数`とすれば良い。
ただし、渡した引数は後ろにくっつくので途中に埋め込みたいとかは無理(なはず)。
```json
"scripts": {
"test-touch": "touch"
}
```
```sh
$ npm run test-touch -- hoge.txt
> touch "hoge.txt"
> hoge.txtが作成される
```
# まとめ
以上npm-scriptの簡単な説明でした。
nodeを使うアプリであれば、おそらく`package.json`や`npm`はあると思うのでとっかりとしては始めやすい方だと思います。
タスクランナーとして使ってる方もいるみたいなので是非使ってみてはいかがでしょうか。
# 参考サイト
[公式](https://docs.npmjs.com/misc/scripts)