Introduction to npm-run-all

npm-run-all is a versatile tool that helps JavaScript developers streamline their development process by allowing them to efficiently manage multiple npm scripts at once. This is particularly useful for running build processes, test suites, linters, and more in parallel or sequentially. In this guide, we’ll explore some of the key APIs provided by npm-run-all along with practical examples to help you get started.

Getting Started

First, you need to install npm-run-all as a development dependency in your project:

npm install npm-run-all --save-dev

run-s (Sequence)

The run-s command allows you to run npm-scripts sequentially:

{
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack",
    "deploy": "npm run clean && npm run build",
    "start": "run-s clean build"
  }
}

run-p (Parallel)

The run-p command lets you run npm-scripts in parallel:

{
  "scripts": {
    "lint-js": "eslint .",
    "lint-css": "stylelint '**/*.css'",
    "lint": "run-p lint-js lint-css"
  }
}

Combination of Commands

You can combine run-s and run-p to run scripts both sequentially and in parallel:

{
  "scripts": {
    "clean": "rimraf dist",
    "build:js": "webpack --config webpack.config.js",
    "build:css": "sass src/styles:dist/styles",
    "build": "run-p build:*",
    "predeploy": "run-s clean build",
    "deploy": "gh-pages -d dist",
    "all": "run-s predeploy deploy"
  }
}

Less-known Options

–parallel

You can use the --parallel option to run certain commands in parallel within a sequence:

{
  "scripts": {
    "script1": "echo script1",
    "script2": "echo script2",
    "script3": "echo script3",
    "run-all": "npm-run-all --parallel script1 script2 script3"
  }
}

–continue-on-error

The --continue-on-error flag makes sure that all commands are run even if some fail:

{
  "scripts": {
    "script1": "false",
    "script2": "echo script2",
    "parallel-all": "npm-run-all --parallel --continue-on-error script1 script2"
  }
}

–max-parallel

The --max-parallel option limits the number of scripts that run in parallel:

{
  "scripts": {
    "script1": "echo script1",
    "script2": "echo script2",
    "script3": "echo script3",
    "limited-parallel": "npm-run-all --parallel --max-parallel 2 script1 script2 script3"
  }
}

Application Example

Here is a full example combining the various features mentioned above for a typical web application:

{
  "scripts": {
    "clean": "rimraf dist",
    "lint-js": "eslint .",
    "lint-css": "stylelint '**/*.css'",
    "build:js": "webpack --config webpack.config.js",
    "build:css": "sass src/styles:dist/styles",
    "build": "run-p build:*",
    "predeploy": "run-s lint-* clean build",
    "deploy": "gh-pages -d dist",
    "start": "run-s predeploy deploy && node server.js",
  }
}

In this example, we have tasks for cleaning the build directory, linting JavaScript and CSS files, building the JavaScript and CSS, deploying to GitHub Pages, and starting the development server.

Hash: 4d23322e553e9cd37ace0744b4e593dd85d13bf156a5c050fac4c1ba5f87d072