grunt-contrib-watch

What is grunt-contrib-watch?

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.

What are grunt-contrib-watch's main functionalities?

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"]
      }
    }
  }
}

Other packages similar to grunt-contrib-watch

gulp-watch

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

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

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.

README

grunt-contrib-watch

Run predefined tasks whenever watched file patterns are added, changed or deleted.

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-contrib-watch

Then add this line to your project's Gruntfile.js gruntfile:

grunt.loadNpmTasks('grunt-contrib-watch');

Overview

Inside your Gruntfile.js file, add a section named watch. This section specifies the files to watch, tasks to run when an event occurs and the options used.

files string|array

This defines what file patterns this task will watch. Can be a string or an array of files and/or minimatch patterns.

tasks string|array

This defines which tasks to run when a watched file event occurs.

options array

This controls how this task operates and should contain key:value pairs, see options below.

Options

There are a number of options available. Please review the minimatch options here. As well as some additional options as follows:

debounceDelay integer

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. Default is 500ms.

Example:

watch: {
  scripts: {
    files: '**/*.js',
    tasks: ['jshint'],
    options: {
      debounceDelay: 250
    }
  }
}

interval integer

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.

Config Examples

// 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'],
      options: {
        nocase: true
      }
    },
    src: {
      files: ['lib/*.js', 'css/**/*.scss', '!lib/dontwatch.js'],
      tasks: ['default']
    },
    test: {
      files: '<%= jshint.test.src %>',
      tasks: ['jshint:test', 'qunit']
    }
  }
});