[NPM] Run npm scripts when files change with onchange

In this lesson we will look at how we can setup our npm scripts to execute when the file system has changed. Some common examples of this are automatically linting your code, running unit tests, or using a pre-processor for your CSS.

 

Install:

npm i -D onchange

 

For example, you want to watch all the js file and scss file, to check the tests and lints.

For lints:

    "lint": "npm-run-all lint:**",
    "lint:js": "eslint --cache --fix ./",
    "lint:css": "stylelint '**/*.scss' --syntax scss",
    "lint:css:fix": "stylefmt -R src/",
    "watch:lint": "onchange 'src/**/*.js' 'src/**/*.scss' -- npm run lint",

And for tests:

    "watch": "npm-run-all --parallel watch:*",
    "watch:test": "npm t -- --watch",
    "watch:lint": "onchange 'src/**/*.js' 'src/**/*.scss' -- npm run lint",