How to run multiple NPM scripts in sequence with watch

Question

I am working on angular 7 application. Below are the scripts in my package.json file to build the application

"scripts": {

       "build:all": "npm run build:dev & npm run postbuild",
       "build:dev": "ng build --extract-css --watch",
       "postbuild": "node fileMover.js",
   }

I want to run both build:dev and postbuild commands in sequence. so first command builds the application by updating the dist folder with bundle files. To move the bundle files to separate folders, we have created a fileMover.js node script.

without --watch, build:all script works fine but due to this, we need to manually run the command everytime we make any changes & save through visual studio or other tool. With watch, it never runs the second "postbuild" command.

Is there any alternate to run both scripts (fist with watch) in sequence?

Thanks :)

Answer 1

You could change the & to && as a single & is for running in parallel and double is for one after-the-other, I believe.

scripts": {
  "build:all": "npm run build:dev && npm run postbuild",
  "build:dev": "ng build --extract-css --watch",
  "postbuild": "node fileMover.js",
}

You could also use the 'pre' and 'post' affixes:

scripts": {
  "build:dev": "ng build --extract-css --watch",
  "build:all": "npm run build:dev",
  "postbuild:all": "node fileMover.js",
}