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 parallelshell.

Here's how I'm doing it.

With live-server it'll look like:

"serve": "live-server",
"start": "parallelshell \"npm run scss && npm run scss -- -w\" \"npm run serve\""

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

Answer 3

Use a single ampersand:

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

&& runs tasks in serial; & in parallel.

Answer 4

This is what I use for small npm script based projects: I simply run npm start and start working ;)

• concurrently launches the corresponding tasks in parallel
• node-sass is responsible for the sass->css generation
• it needs to reran the sass task with the --watch option for monitoring of sass related changes
• and finally lite-server starts the server with the build-in live-reload support. By default, it watches for changes for the following file extensions: html,htm,css,js, but everything can be easily adjusted with the configuration files bs-config.json or bs-config.js.

Relevant parts of the package.json:

  ...
  "scripts": {
    "start": "concurrently --names \"SASS,WATCH,SERVE\" -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"npm run sass\" \"npm run sass:watch\" \"npm run serve\"",
    "serve": "lite-server",
    "sass": "node-sass style.sass --output ./ --indent-width 4 --output-style expanded --indent-type space --source-map true",
    "sass:watch": "npm run sass -- --watch"
  },
  ...
  "devDependencies": {
    "lite-server": "^2.2.2",
    "concurrently": "^3.5.0",
    "node-sass": "^4.5.3"
  }

This works well for me on Windows 10 and as well as on the GNU/Linux based distros like Ubuntu.

Answer 5

AFAIK, you can't, in a useful way.

You could push one task to the background by appending & to its command line, but that would keep the task running even when you ^C to stop the running NPM task.

Alternatively, you can call npm run ... twice and bg one:

$ npm run sass:watch &
$ npm run livereload

But that's pretty messy too IMO.

If you want this sort of thing, consider using gulp.

Answer 6

Take a look at Grunt Concurrent

This task is also useful if you need to run multiple blocking tasks like nodemon and watch at once.