NPM Scripts Post Hook not Firing

Question

I am testing using npm scripts to eventually remove my reliance on Gulp. I am starting simply with one main custom script called watch. This script will ultimately run all scripts prefaced with the watch name; for example watch:styles. My watch:styles script will use node-sass to compile my sass files down into CSS. This works. However, my next step is creating a postwatch:styles script that runs the newly created .css files through PostCSS and Autoprefixer.

The Problem, though, is my postwatch:styles hook is never triggered to run.

package.json

{
  "name": "npm-scripts-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "npm-run-all --parallel watch:*",
    "watch:styles": "node-sass -w ./src/styles/main.scss ./dist/assets/styles/app.css",
    "postwatch:styles": "postcss -u autoprefixer --no-map ./dist/assets/styles/app.css -o ./dist/assets/styles/app.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {},
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "node-sass": "^4.5.3",
    "postcss-cli": "^4.0.0",
    "yarn-run-all": "^3.1.1"
  },
  "browserslist": [
    "last 3 versions"
  ]
}

Any advice or suggestions as to why my post hook isn't firing? The initial watch:styles runs just fine. If I run yarn postwatch:styles manually the script runs correctly. Could there be a silent error on my watch:styles that is preventing the hook from firing?

Any advice will be greatly appreciated.

Answer 1

Since watch:styles calls node-sass in watch mode, the command never returns but remains in an active state waiting for your files to change.

And since there is no positive return, postwatch:styles will never be called.

You should try another approach maybe watching your files with watch or nodemon.