Build AND watch sass together

[RDhar]

First off, great work on the extension! It's quickly made itself indispensable when organising npm run scripts. I hope my issue is a minor one where (with any luck) I'm overlooking something simple!

"build:css": "node-sass src/sass --output dist",
-"watch:css": "npm run build:css && npm run build:css -- --watch",
+"watch:css": "npm-run-all build:css build:css -- --watch",

As per the snippet, the 2nd line currently works exactly as intended: compiles the file and then watches it for changes thereafter. The 3rd line is how I tried to substitute in npm-run-all to reduce repetition. However, once the file is compiled, it does not get watched for further changes.

How can I get it to build and then watch with npm-run-all? Thanks for your time and efforts!

[mysticatea]

Hi. Thank you for this issue.

You need quotes to give arguments to an npm-script via npm-run-all.

-"watch:css": "npm run build:css && npm run build:css -- --watch",
+"watch:css": "run-s build:css \"build:css -- --watch\"",

This example means "run build:css and build:css -- --watch in series".

Please mind that it needs double quotes to work on Windows because cmd.exe doesn't recognize single quotes as the string encloser.

If you want, you can use wildcards in script names regardless there are arguments or not. (E.g. run-p "build:* -- --watch")

[RDhar]

Thank you so much for your prompt response, I do appreciate it! As expected, you made it look easy 😃
That's exactly what I was looking and—with your wildcard tip—I've managed to chain together several other commands for my complete list of the scripts below.
Thanks once again, really grateful for your time!

"scripts": {
  "postpublish:css": "postcss dist/main.css --use autoprefixer --output dist/main.css --no-map",
  "prepare:css": "node-sass-chokidar src/sass --quiet --output dist",
  "prepare:html": "pug src/pug --silent --pretty --out dist",
  "prepare:js": "babel src/js --quiet --out-file dist/main.js",
  "publish:css": "run-s \"prepare:css -- --output-style compressed\" postpublish:css",
  "publish:html": "pug src/pug --out dist",
  "publish:js": "babel src/js --out-file dist/main.js --presets minify",
  "publish": "run-p publish:*",
  "serve": "browser-sync start --server dist",
  "start": "run-p \"prepare:* -- --watch\" serve"
}