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.

btw, which live-reload is it? There is this one that seems not have a npm run. Or am I missing something.. — Timo
– Timo, Commented Mar 31, 2021 at 19:07

ericsoco · Accepted Answer · 2016-05-15 05:19:49Z

15

Use a single ampersand:

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

&& runs tasks in serial; & in parallel.

answered May 15, 2016 at 5:19

ericsoco

26.6k31 gold badges101 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Farid Over a year ago

Worked perfectly. I love answers like this. Very simple, and no need for another dependency.

Adam Over a year ago

Does this work cross-platform or Linux and OSX based only? In other words, is it windows-friendly?

Utmost Creator Over a year ago

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

fabio · Accepted Answer · 2017-02-11 20:40:37Z

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

edited Feb 11, 2017 at 20:40

answered Feb 11, 2017 at 18:14

fabio

63410 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:45Z

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\""

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jan 15, 2016 at 18:02

Ryan Metin

8992 gold badges8 silver badges22 bronze badges

1 Comment

Utmost Creator Over a year ago

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.

Evgeny Bobkin · Accepted Answer · 2017-07-19 07:31:10Z

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.

robertklep · Accepted Answer · 2015-12-18 09:26:30Z

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.

answered Dec 18, 2015 at 9:26

robertklep

205k38 gold badges421 silver badges412 bronze badges

Comments

Richard Walton · Accepted Answer · 2015-12-18 10:12:00Z

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.

answered Dec 18, 2015 at 10:12

Richard Walton

4,8053 gold badges41 silver badges49 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related