Development/Workflow: Two approaches to automate livereloading

A good workflow and development environment should support you being productive. Great tooling becomes more and more important the larger your application becomes.

There are mainly two big players for your build and automation environment in the node ecosystem out there: GruntJs and GulpJs.

Both can automate tasks you usually have to do manually such as running your tests or minifying and concatenating your files. While Grunt aims to define the tasks via configuration, Gulp uses a programmatic approach.

Since we’re working with an interpreted language, which doesn’t need to be compiled, the only thing we have to do to make our changes visible, is reloading the page. If you come to a point where you make changes very frequently, you might get annoyed by always reloading it manually.

For this reason, we want to have a look at some existing solutions we could make use of.

Livereloading

We are going to show you two different approaches to automate the process of reloading the page, which will be referred to as livereloading. The first one will fit into your gulp environment. The second will be defined in your code itself and has no dependency on any other buildsystem.

Using Gulp

In the following we will learn how to set up a very vanilla gulp method:

If you haven’t already done so, run npm install –save-dev gulp. This will fetch the latest version of gulp. The –save-dev flag will add an entry to your devDependencies property in your package.json.

Then head over to your existing gulpfile.js or create a new one.

After requiring the module gulp, we want to define a new task and we name it livereload:

var gulp = require('gulp');

gulp.task('livereload', function () {
if (location && location.reload) {
   location.reload();
}
});

// attach the watcher
gulp.watch(['app/**/*'], ['livereload']);

Gulp provides a function called task. As you would probably expect, it is used to define a new task. As a first parameter, it takes the name of the task you want to create. The second parameter can be a callback function or an array with strings of depending tasks, which needs to be resolved first.

gulp.task(name[, deps], fn)

Note: The tasks in the array will be executed before your new task will run. They will run with maximum concurrency.

The gulp.watch() function lets you declare files that should being watched. The function can be used in two different versions: gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]). Both will return an EventEmitter that emits change-events which can be listened on.

Livereload without buildsystem

Sometimes installing a buildsystem for a small app or prototype might be too time intensive. If you want to use only the livereloading, you can afford this without gulp and grunt.

Programmatically

A solution which is independent of any third-party modules can be achieved by using nodes fs.watch:

var fs = require('fs');
fs.watch('index.js', function(event, filename) {
if (location) {
   location.reload();
}
});

Here, we attach a file watcher to the index.js and trigger the reload if the file has changed or renamed. You can also watch for directories and subdirectories. Unfortunately watching subdirectories only works on OSX:

var fs = require('fs');
fs.watch('./', { recursive: true } function(event, filename) {
if (location) {
   location.reload();
}
});

By passing an option object with {recursive: true}, subdirectories are also being watched.

If your development machine is working with other platforms than OSX, you can consider using a third party module to be able to watch subdirectories.

chokidar

One solution is chokidar. It is a wrapper around nodes fs.watch and fs.watchFile and supports many additional features such as excluding files by name or regex and many additional events.

To install chokidar run npm install chokidar.

var chokidar = require('chokidar');
chokidar.watch('./').on('all', function(event, path) {
if (location) {
   location.reload();
}
});

As a first parameter you can pass a filename, directory or even glob. To see extended examples and the full documentation visit the GitHub repository of chokidar.

gaze

Another solution is gaze. This is the module which powers gulp. It has a little different API as chokidar. It provides consistent events across Windows, Linux, and OSX.

Installation can be done by npm install gaze. A simple reloading example looks like the following:

var gaze = require('gaze');
gaze('**/*.js', function(err, watcher) {
this.on('all', function(event, filepath) {
   if(location) {
     location.reload();
   }
});
});

Here, the variable gaze is a function which takes as a first parameter a filename, directory or glob. You can also pass an array with multiple filenames, directories, or globs. The all event gets emitted if a file gets changed, added, or deleted.

Also here, to see extended examples and the full documentation visit the GitHub repository of gaze.

Save up to 70% on some of our top web development products from 11th to 18th April. From Flask to Angular 2, we’ve got everything to keep the modern web developer ahead of the game. Find them here.

About the Author

Timo Weiss is a hybrid mobile application and Norrrde.js back-end developer. He can be found on Github @timoweiss.