Configuring Grunt Watch to Run Lint and Minify on File Changes

Automatically lint and minify JavaScript with Grunt Watch

When you edit a source file, Grunt can run jshint to check syntax and uglify to produce a minified version without manual intervention.

How the watch task works

The grunt-contrib-watch plugin monitors the file system for changes that match a glob pattern. When a change occurs, it spawns a child Grunt process (unless spawn: false is set) and runs the tasks you list in its configuration. Grunt also aggregates rapid successive changes within a debounce window (default 200 ms) to avoid flooding the terminal.

Worked Gruntfile.js example

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
      files: ['src/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    uglify: {
      build: {
        src: ['src/**/*.js'],
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },
    watch: {
      scripts: {
        files: ['src/**/*.js'],
        tasks: ['jshint', 'uglify'],
        options: {
          debounceDelay: 200
        }
      }
    }
  });

  // Load required plugins
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task
  grunt.registerTask('default', ['watch']);
};

Running and verifying the setup

1. Initialize a project: npm init -y
2. Install the plugins: npm install grunt grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-watch --save-dev
3. Place the Gruntfile.js in the project root and create a src folder with a sample JavaScript file.
4. Start watch: grunt watch. You should see a line like Waiting... indicating the watcher is active.
5. Edit src/example.js and save. The terminal will show the jshint run, followed by uglify, and then return to Waiting....
6. Check that build/<pkg.name>.min.js was updated.

Limits and common mistakes

• State leakage with spawn: false: Setting spawn: false makes watch reuse the same Grunt process, which can speed up feedback but may cause tasks that depend on a clean environment (e.g., temporary file cleanup) to behave unexpectedly.
• New files not detected: The watcher only reacts to changes on files that already match the glob when the task starts. Adding a completely new .js file requires restarting grunt watch or reloading the watch config.
• Debounce interval: If you save files very quickly (e.g., via a formatter that writes multiple times), Grunt may batch those changes into a single task run. Adjust debounceDelay in the watch options if you need finer‑grained control.
• LiveReload optional: Adding livereload: true starts a small server that pushes refreshes to browsers via an extension or connect-livereload. Forgetting to install the extension or server will leave the option ineffective.
• Missing plugin loads: Omitting any grunt.loadNpmTasks line results in “Not registered” errors when watch tries to run the associated task.

Practical verification steps

• After starting grunt watch, look for the Waiting... message; its absence means the watcher did not start.
• Note the timestamps of each task run in the console. If two saves occur within 200 ms, you should see only one combined run, confirming debounce aggregation.
• To test livereload, add options: { livereload: true } to the watch config, install a browser LiveReload extension, and verify the page reloads after a file change.