8

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.

RoCkDevstack
  • 3,517
  • 7
  • 34
  • 56
Lewis
  • 5,769
  • 6
  • 30
  • 40
  • btw, which `live-reload` is it? There is [this](https://www.npmjs.com/package/livereload) one that seems not have a npm `run`. Or am I missing something.. – Timo Mar 31 '21 at 19:07

6 Answers6

15

Use a single ampersand:

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

&& runs tasks in serial; & in parallel.

ericsoco
  • 24,913
  • 29
  • 97
  • 127
  • 1
    Worked perfectly. I love answers like this. Very simple, and no need for another dependency. – Farid Oct 18 '19 at 12:54
  • Does this work cross-platform or Linux and OSX based only? In other words, is it windows-friendly? – Adam Jun 25 '20 at 17:48
  • It only works in a `UNIX-like` environment, because of the & ampersand sign. If you wish to run it on Windows you would probably better go with `"dev:watch": "concurrently \" npm run sass:watch \" \" npm run livereload \" "` like described down below, or `"dev": "npm-run-all --parallel sass:watch livereload"` [npm-run-all](https://www.npmjs.com/package/npm-run-all). I have tested `WSL2`, it starts the live-server and the sass compiler, but it does not reload the page. And even git bash did not work for me (I may miss something, but I tried, and it just gets stuck like in cmd console) – Utmost Creator Jan 27 '21 at 21:24
8

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

fabio
  • 594
  • 8
  • 18
5

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\""
Community
  • 1
  • 1
Ryan Metin
  • 899
  • 2
  • 8
  • 22
  • I believe it is better to use `concurrently` or `npm-run-all` as those are updated more frequently, and the community is wider. `parallelshell` was updated three years ago. – Utmost Creator Jan 27 '21 at 21:39
3

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.

Evgeny Bobkin
  • 4,092
  • 2
  • 17
  • 21
1

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.

robertklep
  • 198,204
  • 35
  • 394
  • 381
0

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.

Richard Walton
  • 4,789
  • 3
  • 38
  • 49