How can I run multiple NPM commands with a single NPM Command on Windows

Question

I am setting a package.json file that will start Nodemon, run my watch css command and run browser sync all with the "npm start" command.

This works on my Mac computer at work but does not work on my Windows computer at home.

On my Mac, it will listen for any changes to server and SCSS files and also run browser sync.

On Windows it only runs Nodemon and just waits for any server changes. It looks like it ignores my other two commands.

Do I need to do something different for Windows? Ideally I would like the code to work universally on both platforms.

Nodemon seems to be the problem here because watch-css css and browsersync work but anything after nodemon does not work.

"scripts": {
  "build-css": "node-sass --output-style compressed --source-map true -o public/css scss",
  "watch-css": "nodemon -e scss -x \"npm run build-css\"",
  "build-js": "browserify js/app.js -o public/js/app.js",
  "browser-sync": "browser-sync start --port 4000 --proxy 'localhost:3000' --files 'views/*' 'public/**/*' --no-notify",
  "start": "nodemon ./bin/www & npm run watch-css & npm run browser-sync"
},

Answer 1

Here's what I use: npm-run-all(this is cross-platform). They allow you to run your processes/commands parallelly and sequentially (-p or -s).

"scripts": {
    "build-css": "node-sass-chokidar src/ -o src/ --importer=node_modules/node-sass-tilde-importer",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    // ... and much more
}

This is working fine for me in both windows and mac. Try it, hope this is helpful.