Using Jekyll with Gulp and Livereload

Question

This question has hinted me on how to run Jekyll with Gulp.

It works fine except I’m unable to trigger livereload (but it runs without errors).

My knowledge of Node is limited, so I’m probably missing something...

var gulp = require('gulp');
var refresh = require('gulp-livereload');
var lr = require('tiny-lr');
var server = lr();

gulp.task('jw', function(){
    var spawn = require('child_process').spawn,
        j     = spawn('jekyll', ['-w', 'build']);

    j.stdout.on('data', function (data) {
        console.log('stdout: ' + data); // works fine
        refresh(server); // doesn’t trigger
    });
});

Answer 1

gulp-livereload requires files piped into it via gulp.src() or other vinyl input sources. In this case, I recommend adding gulp-watch to watch for the files that Jekyll writes, and reload based on that.

It would look something like this:

var gulp = require('gulp');
var refresh = require('gulp-livereload');
var watch = require('gulp-watch');
var lr = require('tiny-lr');
var server = lr();

gulp.task('jw', function(){
    var spawn = require('child_process').spawn,
        j     = spawn('jekyll', ['-w', 'build']);

    j.stdout.on('data', function (data) {
        console.log('stdout: ' + data); // works fine
    });

    watch({glob: '/glob/path/to/jekyll/output'}, function(files) {
        // update files in batch mode
        return files.pipe(refresh(server));
    });
});

As long as Jekyll only rewrites changed files, this will work perfectly. However, if it overwrites everything, then livereload will do little more than refresh the browser on every change.

Answer 2

You can trigger livereload at the end of the build, making it reload the page so you won't have multiple refresh :