npm-run-allで複数の処理を実行する メモ

npm-run-allとは？？

複数の処理を1つのコマンドでできるようになるツール
buildを入力して実行→exportを入力して実行 から
1つのコマンドを入力→buildとexportが実行されるようにできる

やってみる

Next.jsの静的HTML書き出しを行います
1.従来の実行方法

npm run build 
-------------
npm run export

と2回コマンドを入力しなければなりません

2.npm-run-allでの実行方法

まずはnpm-run-allをインストール

npm i -D npm-run-all

package.jsonを見てみると

"devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "npm-run-all": "^4.1.5"
  }

"npm-run-all": "^4.1.5"が追加された

次にscriptsの部分を変更する
元は↓

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },

変更後↓

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "run-s build next:export",
    "next:export": "next export"
  },

"next:export": "next export"を追加し、
"export": "run-s build next:export",でbuildの後exportされるようになる
※-sコマンドは直列に実行するという意味

linuxではbuild && exportのように&&を間に入れることでできるらしい