1. onchange
Use glob patterns to watch file sets and run a command when anything is added, changed or deleted.
onchange
Package: onchange
Created by: Qard
Last modified: Wed, 05 Apr 2023 02:08:55 GMT
Version: 7.1.0
License: MIT
Downloads: 736,326
Repository: https://github.com/Qard/onchange

Install

npm install onchange
yarn add onchange

onchange

Use glob patterns to watch file sets and run a command when anything is added, changed or deleted.

Install

 npm install onchange

Usage

 # On every change run `npm test`.
onchange 'app/**/*.js' 'test/**/*.js' -- npm test

# On every change restart `server.js` (by killing the running process).
onchange -i -k '**/*.js' -- node server.js

# On every change `echo` file change.
onchange '**/*.js' -- echo '{{event}} to {{file}}'

NOTE: Windows users may need to use double quotes rather than single quotes. If used in an npm script, remember to escape the double quotes.

You can match as many glob patterns as you like, just put the command you want to run after the -- and it will run any time a file matching any of the globs is added changed or deleted.

Other available replacement variables are fileExt
(path.extname(file)), fileBase (path.basename(file)),
fileBaseNoExt (basename, without extension), and fileDir
(path.dirname(file)).

Options

Add (-a, --add)

To execute the command for all initially added paths:

 onchange -a 'config.json' -- microservice-proxy -c {{file}} -p 9000

Initial (-i, --initial)

To execute the command once on load without any event:

 onchange -i '**/*.js' -- npm start

Exclude (-e, --exclude)

To exclude matches:

 onchange '**/*.ts' -e 'dist/**/*.js' -- tslint

No Exclude (--no-exclude)

**/node_modules/** and **/.git/** are excluded by default, use --no-exclude to disable:

 onchange 'node_modules/**' --no-exclude -- tslint

Exclude Path (--exclude-path)

Excludes all paths in a file following the .gitignore specification.

 onchange '**' --exclude-path .gitignore -- prettier

Kill (-k, --kill)

To kill current and pending processes between changes:

 onchange -k '**/*.js' -- npm test

Jobs (-j <n>, --jobs <n>)

Set the maximum concurrent processes to run (default is 1):

 onchange -j2 '**/*.js' -- cp -v -r '{{file}}' 'test/{{file}}'

Delay (-d, --delay)

To set the amount of delay (in ms) between process changes:

 onchange -d 1000 '**/*.js' -- npm start

Await Write Finish (--await-write-finish <ms>)

To hold the events until the size does not change for a configurable amount of time (in ms, default is 2000):

 onchange --await-write-finish 1500 '**/*.js' -- npm test

Poll (-p <ms>, --poll <ms>)

Use polling to monitor for changes. This option is useful if you're watching an NFS volume.

 onchange -p 100 '**/*.js' -- npm test

Outpipe (-o, --outpipe)

Shell command to execute every change:

 onchange -o '> .changelog' 'src/**/*.js' -- echo '{{event}} to {{file}}'

P.S. When a command is used with --outpipe, the stdout from the command will be piped into outpipe.

Filter (-f, --filter)

By default, onchange watches for all events from chokidar. Use
this option to watch only for events you need:

 onchange -f add -f change '**/*.js' -- npm start

Verbose (-v, --verbose)

Enable if you want verbose logging from onchange (useful for debugging). For example:

 onchange -v 'app/**/*.js' 'test/**/*.js' -- npm test

TypeScript

Includes types for TypeScript users.

  • cli-error-notifier - Send native desktop notifications if a command exits with an exit code other than 0.

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin