How to Run Multiple NPM Scripts Sequentially

Updated: December 28, 2023 By: Guest Contributor Post a comment

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

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:

  • No need for additional tools or syntax
  • Utilizes built-in NPM features

Cons:

  • Script names are not flexible
  • Sequence is implicit and might be less clear