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
    });
});

OverZealous · Accepted Answer · 2014-02-19T16:14:06.500

6

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.

edited Feb 19 '14 at 16:14

answered Feb 19 '14 at 14:37

OverZealous

39,252
15
98
100

It works but Jekyll replace all files, so livereload is triggered for each. Is there a way to trigger it only once? – lemp Feb 19 '14 at 15:28
I updated the answer to use `gulp-watch` in batch mode. I also had a mistake in the way I configured `watch`, I apologize for that. It needed the input files specified as `{glob:<>}`. – OverZealous Feb 19 '14 at 16:14
@OverZealous this isn't working for me, I added a `console.log` in the `watch` callback and it's not called when the site is changing. My path is `_site`. Any ideas? – Sam Selikoff Mar 01 '14 at 19:21

score 0 · Answer 2 · answered Jul 29 '16 at 13:29

0

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

answered Jul 29 '16 at 13:29

Guillaume Gautier

532
4
6

Using Jekyll with Gulp and Livereload

2 Answers2