Running NPM scripts sequentially

Javascriptnode.jsNpmCmd

Javascript Problem Overview


Let's say I have

"scripts": {
    "pre-build": "echo \"Welcome\" && exit 1",
    "build_logic": "start cmd.exe @cmd /k \"yo esri-appbuilder-js:widget && exit 1\"",
    "post_build":  "start C:\\WebAppBuilderForArcGIS\\startupShortcut",
    "exit" : "start cmd.exe @cmd /k \"echo \"goodbye\" && exit 1\""
  },

What NPM command can I run to let all of these scripts launch sequentially. When I use pre/post fixing they launch sequentially but they don't wait for the parent script to finish before executing. I am assuming the only solution is like: https://stackoverflow.com/q/25371192/3174123 ? I know this can be done with Gulp but I would like to stick with NPM for now to explore its capabilities. Thanks for any help!

Javascript Solutions


Solution 1 - Javascript

Invoke these scripts via npm run and chain them with double ampersand &&:

npm run pre-build && npm run build_logic && npm run post_build && npm run exit

Explanation:

  • Use && (double ampersand) for sequential execution.
  • Use & (single ampersand) for parallel execution.

Solution 2 - Javascript

Following @Mobiletainment's great answer, you can also use npm-run-all to make the command much shorter and much more readable. In your case:

"scripts": {
    ...
    "build": "run-s pre-build build_logic post_build exit"
}

run-s is a shortcut npm-run-all provides, that runs all the given npm-scripts sequentially, hence the -s (run-s is a shorter version of npm-run-all -s).

Solution 3 - Javascript

You can prefix your scripts pre and post so they will execute automatically:

"scripts": {
  "prebuild": "echo \"Welcome\" && exit 1",
  "build": "start cmd.exe @cmd /k \"yo esri-appbuilder-js:widget && exit 1\"",
  "postbuild":  "start C:\\WebAppBuilderForArcGIS\\startupShortcut",
  "exit" : "start cmd.exe @cmd /k \"echo \"goodbye\" && exit 1\""
}

then run npm run build

Solution 4 - Javascript

You could just string them into another script. "start": "pre-build && build_logic && post_build && exit"

Solution 5 - Javascript

You can use npm-run-all to combine multiple commands in a lot of different ways

For example, if you had the following scripts in your package.json:

"scripts": {
    "clean": "rimraf dist",
    "lint":  "eslint src",
    "build": "babel src -o lib"
}

You could run them all sequentially like this:

$ npm-run-all clean lint build

See this question for how to run multiple npm commands in parallel

Solution 6 - Javascript

you can try:


"scripts": {
  "clean-dist": "rm -f ./dist/*.js && rm -f ./dist/*.map",
  "build": "npm run clean-dist && parcel build ./packages/index.html"
},

Solution 7 - Javascript

Sequential & Parallel Mix Example

In case you need a mix, here's what I did to ensure command_1 runs and completes first, while command_2a and command_2b can run in parallel.

    "dev": "yarn command_1 && (yarn command_2a & yarn command_2b)"

Practical Example:

    "dev": "yarn buildPackage && (yarn watchPackageSource & yarn watchExamplePage)"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRiceView Question on Stackoverflow
Solution 1 - JavascriptMobiletainmentView Answer on Stackoverflow
Solution 2 - JavascriptOr A.View Answer on Stackoverflow
Solution 3 - JavascriptTzach OvadiaView Answer on Stackoverflow
Solution 4 - JavascriptDave VView Answer on Stackoverflow
Solution 5 - JavascriptKyleMitView Answer on Stackoverflow
Solution 6 - JavascriptMuhammed MoussaView Answer on Stackoverflow
Solution 7 - JavascriptAerodynamicView Answer on Stackoverflow