0

First I'm trying to use this solution from Stack Overflow. I got everything to work except the last part when I try to watch the files. What I'm trying to accomplish is to watch for changes to my sass files and build a new style.css prefix and minify for each change and on save I can preview the changes in browser. I would like to use only the npm, no Gulp or Grunt please.

problem

{
  "name": "name",
  "version": "version",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prebuild:css": "node-sass src/main.scss css/style.css ",
    "build:css": "postcss --use autoprefixer -b 'last 2 versions' < css/style.css | postcss --use cssnano > css/style.min.css ",
    "build": "npm run prebuild:css && npm run build:css ",
    "watch": "watch 'npm run build' src/* "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "cssnano": "^4.1.10",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-cli": "^8.3.1",
    "watch": "^1.0.2"
  }
}
hydrix85
  • 49
  • 1
  • 5
  • Please see my answer below. Although I understand that you are looking for a purist solution (NPM only), but based on my experience you'll quickly find it's a lot more difficult to run sequential or even parallel scripts without a task runner - I personally prefer Gulp - it works beautifully and you can perform a chain of complex tasks based on environment variables - for instance minify/uglify/concat on watch if your environment is PROD, but not when on DEV. – robertp Mar 29 '21 at 09:24

1 Answers1

0

In your package.json file change the watch script to this:

"watch": "watch 'npm run build' './src'"
robertp
  • 3,557
  • 1
  • 20
  • 13