grunt-contrib-watch
Advanced tools
Run predefined tasks whenever watched file patterns are added, changed or deleted.
grunt-contrib-watch is a Grunt plugin that watches files and directories for changes. When changes are detected, it can run predefined tasks, making it useful for automating workflows such as compiling code, running tests, or refreshing a browser.
Watch Files for Changes
This feature allows you to watch JavaScript files for changes and run the 'jshint' task whenever a change is detected. The 'spawn' option is set to false to improve performance.
{
"watch": {
"scripts": {
"files": ["**/*.js"],
"tasks": ["jshint"],
"options": {
"spawn": false
}
}
}
}Live Reload
This feature enables live reloading of the browser when files change. The 'livereload' option is set to true, which will trigger a browser refresh whenever a watched file changes.
{
"watch": {
"options": {
"livereload": true
},
"scripts": {
"files": ["**/*.js"],
"tasks": ["jshint"]
}
}
}Custom Event Handling
This feature allows you to specify custom events to watch for, such as 'added' or 'deleted'. In this example, the 'jshint' task will run only when JavaScript files are added or deleted.
{
"watch": {
"scripts": {
"files": ["**/*.js"],
"tasks": ["jshint"],
"options": {
"event": ["added", "deleted"]
}
}
}
}gulp-watch is a Gulp plugin that provides file watching capabilities similar to grunt-contrib-watch. It allows you to watch files and directories for changes and run Gulp tasks in response. Compared to grunt-contrib-watch, gulp-watch is designed to work within the Gulp ecosystem, which is known for its simplicity and stream-based approach.
chokidar is a highly efficient and flexible file watcher library for Node.js. It provides a rich API for watching files and directories, and it can be used independently or integrated into other build tools. Compared to grunt-contrib-watch, chokidar offers more advanced features and better performance, making it suitable for large projects with complex file-watching needs.
nodemon is a utility that monitors for changes in your source and automatically restarts your Node.js application. While it is primarily used for restarting server applications, it can also be configured to watch for changes in other types of files. Compared to grunt-contrib-watch, nodemon is more focused on server-side development and provides automatic restarts rather than running arbitrary tasks.
Run predefined tasks whenever watched file patterns are added, changed or deleted.
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-contrib-watch --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-contrib-watch');
Run this task with the grunt watch command.
There are a number of options available. Please review the minimatch options here. As well as some additional options as follows:
Type: String|Array
This defines what file patterns this task will watch. Can be a string or an array of files and/or minimatch patterns.
Type: String|Array
This defines which tasks to run when a watched file event occurs.
Type: Boolean
Default: false
This instructs the watch task to not spawn task runs in a child process. Setting this option also speeds up the reaction time of the watch (usually 500ms faster for most) and allows subsequent task runs to share the same context (i.e., using a reload task). Not spawning task runs can make the watch more prone to failing so please use as needed.
Example:
watch: {
scripts: {
files: ['**/*.js'],
tasks: ['livereload'],
options: {
nospawn: true,
},
},
},
Type: Boolean
Default: false
As files are modified this watch task will spawn tasks in child processes. The default behavior will only spawn a new child process per target when the previous process has finished. Set the interrupt option to true to terminate the previous process and spawn a new one upon later changes.
Example:
watch: {
scripts: {
files: '**/*.js',
tasks: ['jshint'],
options: {
interrupt: true,
},
},
},
Type: Integer
Default: 500
How long to wait before emitting events in succession for the same filepath and status. For example if your Gruntfile.js file was changed, a changed event will only fire again after the given milliseconds.
Example:
watch: {
scripts: {
files: '**/*.js',
tasks: ['jshint'],
options: {
debounceDelay: 250,
},
},
},
Type: Integer
Default: 100
The interval is passed to fs.watchFile. Since interval is only used by fs.watchFile and this watcher also uses fs.watch; it is recommended to ignore this option. Default is 100ms.
Type: String|Array
Default: 'all'
Specify the type watch event that trigger the specified task. This option can be one or many of: 'all', 'changed', 'added' and 'deleted'.
Example:
watch: {
scripts: {
files: '**/*.js',
tasks: ['generateFileManifest'],
options: {
event: ['added', 'deleted'],
},
},
},
Type: Boolean
Default: true
This is only a task level option and cannot be configured per target. By default the watch task will duck punch grunt.fatal and grunt.warn to try and prevent them from exiting the watch process. If you don't want grunt.fatal and grunt.warn to be overridden set the forever option to false.
Type: Boolean|Number|Object
Default: false
Set to true or set livereload: 1337 to a port number to enable live reloading. Default and recommended port is 35729.
If enabled a live reload server will be started with the watch task per target. Then after the indicated tasks have ran, the live reload server will be triggered with the modified files.
Example:
watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
},
},
},
// Simple config to run jshint any time a file is added, changed or deleted
grunt.initConfig({
watch: {
files: ['**/*'],
tasks: ['jshint'],
},
});
// Advanced config. Run specific tasks when specific files are added, changed or deleted.
grunt.initConfig({
watch: {
gruntfile: {
files: 'Gruntfile.js',
tasks: ['jshint:gruntfile'],
},
src: {
files: ['lib/*.js', 'css/**/*.scss', '!lib/dontwatch.js'],
tasks: ['default'],
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit'],
},
},
});
watch eventThis task will emit a watch event when watched files are modified. This is useful if you would like a simple notification when files are edited or if you're using this task in tandem with another task. Here is a simple example using the watch event:
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
},
},
});
grunt.event.on('watch', function(action, filepath) {
grunt.log.writeln(filepath + ' has ' + action);
});
The watch event is not intended for replacing the standard Grunt API for configuring and running tasks. If you're trying to run tasks from within the watch event you're more than likely doing it wrong. Please read configuring tasks.
A very common request is to only compile files as needed. Here is an example that will only lint changed files with the jshint task:
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
tasks: ['jshint'],
options: {
nospawn: true,
},
},
},
jshint: {
all: ['lib/*.js'],
},
});
// on watch events configure jshint:all to only run on changed file
grunt.event.on('watch', function(action, filepath) {
grunt.config(['jshint', 'all'], filepath);
});
If you need to dynamically modify your config, the nospawn option must be enabled to keep the watch running under the same context.
If you save multiple files simultaneously you may opt for a more robust method:
var changedFiles = Object.create(null);
var onChange = grunt.util._.debounce(function() {
grunt.config(['jshint', 'all'], Object.keys(changedFiles));
changedFiles = Object.create(null);
}, 200);
grunt.event.on('watch', function(action, filepath) {
changedFiles[filepath] = action;
onChange();
});
Live reloading is built into the watch task. Set the option livereload to true to enable on the default port 35729 or set to a custom port: livereload: 1337.
The simplest way to add live reloading to all your watch targets is by setting livereload to true at the task level. This will run a single live reload server and trigger the live reload for all your watch targets:
grunt.initConfig({
watch: {
options: {
livereload: true,
},
css: {
files: ['public/scss/*.scss'],
tasks: ['compass'],
},
},
});
You can also configure live reload for individual watch targets or run multiple live reload servers. Just be sure if you're starting multiple servers they operate on different ports:
grunt.initConfig({
watch: {
css: {
files: ['public/scss/*.scss'],
tasks: ['compass'],
options: {
// Start a live reload server on the default port 35729
livereload: true,
},
},
another: {
files: ['lib/*.js'],
tasks: ['anothertask'],
options: {
// Start another live reload server on port 1337
livereload: 1337,
},
},
dont: {
files: ['other/stuff/*'],
tasks: ['dostuff'],
},
},
});
Once you've started a live reload server you'll be able to access the live reload script. To enable live reload on your page, add a script tag before your closing </body> tag pointing to the livereload.js script:
<script src="http://localhost:35729/livereload.js"></script>
Feel free to add this script to your template situation and toggle with some sort of dev flag.
Instead of adding a script tag to your page, you can live reload your page by installing a browser extension. Please visit how do I install and use the browser extensions for help installing an extension for your browser.
Once installed please use the default live reload port 35729 and the browser extension will automatically reload your page without needing the <script> tag.
Since live reloading is used when developing, you may want to disable building for production (and are not using the browser extension). One method is to use Connect middleware to inject the script tag into your page. Try the connect-livereload middleware for injecting the live reload script into your page.
EMFILE: Too many opened files.?This is because of your system's max opened file limit. For OSX the default is very low (256). Temporarily increase your limit with ulimit -n 10480, the number being the new max limit.
Yes. Although grunt-contrib-watch is a replacement watch task for Grunt v0.4, version grunt-contrib-watch@0.1.x is compatible with Grunt v0.3. grunt-contrib-watch >= 0.2.x is *only compatible and recommended to use with Grunt v0.4.
Likely because of an enthusiastic pattern trying to watch thousands of files. Such as '**/*.js' but forgetting to exclude the node_modules folder with '!node_modules/**/*.js'. Try grouping your files within a subfolder or be more explicit with your file matching pattern.
The goal of this watch task is as files are changed, run tasks as if they were triggered by the user themself. Each time a user runs grunt a process is spawned and tasks are ran in succession. In an effort to keep the experience consistent and continualy produce expected results, this watch task spawns tasks as child processes by default.
Sandboxing task runs also allows this watch task to run more stable over long periods of time. As well as more efficiently with more complex tasks and file structures.
Spawning does cause a performance hit (usually 500ms for most environments). It also cripples tasks that rely on the watch task to share the context with each subsequent run (i.e., reload tasks). If you would like a faster watch task or need to share the context please set the nospawn option to true. Just be aware that with this option enabled, the watch task is more prone to failure.
Task submitted by Kyle Robinson Young
This file was generated on Sat May 11 2013 21:51:44.
FAQs
Run predefined tasks whenever watched file patterns are added, changed or deleted
The npm package grunt-contrib-watch receives a total of 328,864 weekly downloads. As such, grunt-contrib-watch popularity was classified as popular.
We found that grunt-contrib-watch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.