Jekyll 自动重新加载客户端？

Question

Here's a question 关于 Jekyll 自动重新加载，但它仅用于文件生成方面的“重新加载”。

我还希望我的浏览器在我更新 Jekyll 文件后自动刷新页面，就像例如Meteor（开箱即用）和 DocPad (docpad install livereload)。如何使用 Jekyll 进行实时重新加载？

Answer 1

其他答案已过时，因为PR #5142 已合并到 master。

使用jekyll serve --livereload调用。

Answer 2

简介

我重用了旧的但高效的shakyShane/jekyll-gulp-sass-browser-sync code。

由于 Jekyll 现在包含原生 sass/scss 处理，我只在 Gulp task 中留下了使用 browsersync 所需的命令

先决条件

你需要有Jekyll, Node 并安装了Npm。

注意：这仅在 Ubuntu 14.04 上进行了测试。 Apple 和 Windows 用户可能需要调整或不调整此方法，欢迎提供建设性反馈。

杰基尔

可以在现有的 Jekyll 源上进行此浏览器同步安装。

您也可以从新来源开始：jekyll new folderName && cd folderName。这将创建一个新的 jekyll 并进入工作文件夹 folderName。

节点模块

为了安装必要的节点模块，请在工作文件夹的根目录下创建一个 package.json。

{
  "devDependencies": {
    "browser-sync": "^2.2.0",
    "gulp": "^3.7"
  }
}

从您的工作文件夹安装依赖项：npm install（sudo npm install，如果它不起作用）

Gulp 设置

在工作文件夹的根目录下创建一个 gulpfile.js：

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var cp          = require('child_process');

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
        .on('close', done);
});

/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});

/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', ['jekyll-build'], function() {
    browserSync({
        server: {
            baseDir: '_site'
        }
    });
});

/**
 * Watch html/md files, run jekyll & reload BrowserSync
 * if you add folder for pages, collection or datas, add them to this list
 */
gulp.task('watch', function () {
    gulp.watch(['./*', '_layouts/*', '_includes/*', '_posts/*', '_sass/*', 'css/*'], ['jekyll-rebuild']);
});

/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'watch']);

现在只需在工作文件夹的根目录下运行gulp，它就会启动服务器，在默认浏览器中加载页面，并且每次更新 Jekyll 文件时，它都会触发 jekyll 构建，然后是自动重新加载浏览器。 注意：根据 Jekyll 构建时间，重新加载浏览器可能需要几秒钟。

欲了解更多信息，请查看Browsersync。

审查员注意事项（见答案 #2）

这就是我所说的建设性行动。我经营一家企业，尽我所能为社区服务。有时我只有一点时间可以给予，但我以建设性的方式给予它，试图为他人找到解决方案，而不是拖钓interwooz！试图证明我可以是邪恶的。你是系统的一部分，你制造了系统的邪恶面，因为你认为你拥有真理，所以削减了知识。 （对我来说几乎是戈德温点）

我的答案 #2 在两年后仍然可以，这个将在一年后过时。模块版本，node.js 死而支持 io.js 等等。

是的，愚蠢真的是 stackoverflowing 我！

Answer 3

你可以试试browsersync

编辑：这个答案是我之前答案的副本，由 Eran、martin Clayton 和 Soner Gönül 于 2 月 20 日删除。

这是我的观点：

一些 SO sensors 认为我之前的回答显然毫无用处，因此他们决定关闭它。 难以置信！他们只是想让自己的观点占上风，即使他们正在破坏知识。

我给出了 browsersync.io 的链接，认为复制任何示例代码都没有用，因为最新的文档在 browsersync.io 上。

当您谈论指向个人博客的链接时，仅链接答案 参数是可以的。指向软件网页的链接应该是持久的，主要是如果它是一个被广泛采用的链接。

我的回答很有用。只有一点点，也许，但很有用。而且我认为一个聪明的反应可能是编辑和完成这个答案而不是关闭它，只是因为你觉得自己被授权了。