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 --s         


        

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

Answer 2

Use a single ampersand:

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

&& runs tasks in serial; & in parallel.

Answer 3

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.

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

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 6

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