将 Jekyll 与 Gulp 和 Livereload 一起使用答案

【问题标题】：Using Jekyll with Gulp and Livereload将 Jekyll 与 Gulp 和 Livereload 一起使用
【发布时间】：2014-02-19 14:20:57
【问题描述】：

This question 提示我如何使用 Gulp 运行 Jekyll。

除了我无法触发 livereload 之外它工作正常（但它运行时没有错误）。

我对 Node 的了解有限，所以我可能遗漏了一些东西......

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

【问题讨论】：

标签： jekyll livereload gulp

【解决方案1】：

gulp-livereload 需要通过gulp.src() 或其他vinyl 输入源将文件传送到其中。在这种情况下，我建议adding gulp-watch 监视 Jekyll 写入的文件，并在此基础上重新加载。

看起来像这样：

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

只要 Jekyll 只重写更改的文件，这将完美地工作。但是，如果它覆盖了所有内容，那么 livereload 只会在每次更改时刷新浏览器。

【讨论】：

它可以工作，但 Jekyll 会替换所有文件，因此每个文件都会触发 livereload。有没有办法只触发一次？
我更新了答案以在批处理模式下使用gulp-watch。我在配置watch 的方式上也有错误，对此我深表歉意。它需要指定为{glob:<<inputfiles>>} 的输入文件。
@OverZealous 这对我不起作用，我在watch 回调中添加了一个console.log，并且在站点更改时不会调用它。我的路径是_site。有什么想法吗？

【解决方案2】：

您可以在构建结束时触发 livereload，使其重新加载页面，这样您就不会多次刷新：

【讨论】：