Watch Files and Directories with Node.js

By  on  

Watching a file or directory for changes is an important part of automation.  We all enjoy using our favorite CSS preprocessor's "watch" feature -- we can still refresh the page and see our changes as though we were simply writing in pure CSS.  Node.js makes both file and directory watching easy -- but it's a bit more difficult than you may think.

Simply put:  Node.js' watching features aren't consistent or performant yet, which the documentation admits.  The good news:  a utility called chokidar stabilizes file watching and provides added insight into what has happened.  chokidar provides a wealth of listeners;  instead of providing boring reduced examples, here's what chokidar provides you:

var chokidar = require('chokidar');

var watcher = chokidar.watch('file, dir, or glob', {
  ignored: /[\/\\]\./, persistent: true
});

var log = console.log.bind(console);

watcher
  .on('add', function(path) { log('File', path, 'has been added'); })
  .on('addDir', function(path) { log('Directory', path, 'has been added'); })
  .on('change', function(path) { log('File', path, 'has been changed'); })
  .on('unlink', function(path) { log('File', path, 'has been removed'); })
  .on('unlinkDir', function(path) { log('Directory', path, 'has been removed'); })
  .on('error', function(error) { log('Error happened', error); })
  .on('ready', function() { log('Initial scan complete. Ready for changes.'); })
  .on('raw', function(event, path, details) { log('Raw event info:', event, path, details); })

// 'add', 'addDir' and 'change' events also receive stat() results as second
// argument when available: http://nodejs.org/api/fs.html#fs_class_fs_stats
watcher.on('change', function(path, stats) {
  if (stats) console.log('File', path, 'changed size to', stats.size);
});

// Watch new files.
watcher.add('new-file');
watcher.add(['new-file-2', 'new-file-3', '**/other-file*']);

// Un-watch some files.
watcher.unwatch('new-file*');

// Only needed if watching is `persistent: true`.
watcher.close();

// One-liner
require('chokidar').watch('.', {ignored: /[\/\\]\./}).on('all', function(event, path) {
  console.log(event, path);
});

What a wealth of handles, especially when you've experienced the perils of `fs` watch functionality.  File watching is essential to seamless development and chokidar makes life easy!

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Add Site Screenshots for External Links Using MooTools Tooltips

    Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools. The MooTools JavaScript The first step is to grab...

  • By
    iPhone Checkboxes Using MooTools

    One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...

Discussion

  1. This tool was missing in Node.js, with it, it will be easier to play and manipulate with the directory structure and files.

  2. ravindranath

    The term “chokidar” seems to be a Hindi word, which literally means watcher. :)

  3. I have try fs.watch function of nodejs, it’s work fine but can you let me watcher work after complete change.

    fs.watch function start working when changes start.

  4. One of my favorite libraries. Keep spreading the good news!

  5. Jamie

    you can now also watch for file changes on a remote server using this module:

    https://www.npmjs.com/package/remote-file-watcher

  6. abhishek

    Is it possible to get process id or name from chokidar? I mean the process which updated the file system.

  7. Elia

    Hello!

    I’ve created an app using javascript. What I want to do is to continuously check the state of a directory. Since I’m not able to do this in javascript for security reasons I was thinking of using node.js. Is it possible to run run node.js in the background while javascript continues?

    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!