# Examples ```js // Simple config to run jshint any time a file is added, changed or deleted grunt.initConfig({ watch: { files: '**/*', tasks: ['jshint'] } }); ``` ```js // Advanced config. Run specific tasks when specific files are added, changed or deleted. grunt.initConfig({ watch: { gruntfile: { files: 'Gruntfile.js', tasks: ['jshint:gruntfile'], options: { nocase: true } }, src: { files: ['lib/*.js', 'css/**/*.scss', '!lib/dontwatch.js'], tasks: ['default'] }, test: { files: '<%= jshint.test.src %>', tasks: ['jshint:test', 'qunit'] } } }); ``` ## Using the `watch` event This 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, for example a live reload task. Here is a simple example using the `watch` event: ```js grunt.initConfig({ watch: { scripts: { files: ['lib/*.js'], tasks: [''], }, }, }); 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](http://gruntjs.com/configuring-tasks).** ### Compiling Files As Needed 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: ```js grunt.initConfig({ watch: { scripts: { files: ['lib/*.js'], tasks: ['jshint'], }, }, 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 save multiple files simultaneously you may opt for a more robust method: ```js 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 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: ```js 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: ```js 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'], }, }, }); ``` ### Enabling Live Reload in Your HTML 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 `` tag pointing to the `livereload.js` script: ```html ``` ### Using Live Reload with the Browser Extension 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](http://feedback.livereload.com/knowledgebase/articles/86242-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 `