How to Run Multiple NPM Scripts Sequentially

Learn how to run multiple npm scripts sequentially through 3 different techniques.

Solution 1: Using && Operator
Solution 2: NPM Run Series Package
Solution 3: Using NPM Pre and Post Hooks

Solution 1: Using && Operator

Description: The most common way to run NPM scripts sequentially is to use the && operator to chain the commands together. When you use the && operator, the next command will run only if the previous one succeeds. Here’s how to use it:

Create the scripts you wish to run in the package.json file.
Combine them into a single script using the && operator.
Run the combined script using npm run.

{
  "scripts": {
    "build": "npm run clean && npm run compile",
    "clean": "echo 'cleaning...' && rm -rf ./dist",
    "compile": "echo 'compiling...' && tsc"
  }
}

Pros:

Simple and easy to use
No need for additional tools or packages

Cons:

Not suitable for complex workflows
Each script must succeed for the next to run

Solution 2: NPM Run Series Package

Description: For more control over the execution flow of scripts, you can use the npm-run-series package, which allows you to define a series of NPM scripts to run sequentially in your package.json file.

Install the npm-run-series package using npm install npm-run-series --save-dev.
Configure the package.json to use npm-run-series for running multiple scripts.
Execute the defined series with npm run.

{
  "scripts": {
    "build-series": "npm-run-series clean compile",
    "clean": "echo 'cleaning...' && rm -rf ./dist",
    "compile": "echo 'compiling...' && tsc"
  }
}

Pros:

Allows for more complex script sequences
Easy to install and configure

Cons:

Requires an additional package

Solution 3: Using NPM Pre and Post Hooks

Description: NPM has a feature called pre and post hooks that automatically runs scripts before or after a script that has been called. This is a handy method for running tasks in a specific sequence.

Create scripts in your package.json using the pre and post prefixes to define the order of execution.
Run your main script, and NPM will handle the sequence.

{
  "scripts": {
    "prebuild": "echo 'cleaning...' && rm -rf ./dist",
    "build": "echo 'compiling...' && tsc",
    "postbuild": "echo 'post-build operations'"
  }
}

Pros: