How can I get node-sass watch and live reload to work from a single NPM script?

Question

Taking the following scripts section from a package.json:

"scripts":{
    "sass:watch": "npm run sass -- -w ./src/public/stylesheets -r --source-map true",
    "livereload": "live-reload --port 9091 ./src/**/*",
    "dev:watch" : "npm run sass:watch; npm run livereload"
}

How can I successfully get both the sass:watch and livereload tasks to run, without blocking each other, from the dev:watch task?

Currently, when I run npm run dev:watch sass:watch blocks livereload.

If I reorder them, the same problem occurs.

Answer 1

Use a single ampersand:

"dev:watch" : "npm run sass:watch & npm run livereload"

&& runs tasks in serial; & in parallel.

Answer 2

you could try the concurrently package for npm

npm install concurrently --save-dev

then use it to run both of your script:

"dev:watch": "concurrently  \" npm run sass:watch \" \" npm run livereload  \" ",

you can find info about the package here: https://www.npmjs.com/package/concurrently