Question

Here's a question关于Jekyll自动重新加载，但它仅用于重新加载＆＃34;在文件生成方面。

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

Answer 1

简介

我重复使用旧的shakyShane/jekyll-gulp-sass-browser-sync code。

由于Jekyll现在包含原生sass / scss处理，我只留下了在browsersync

中使用Gulp task所需的命令

Prerequisits

您需要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！试图证明我可能是邪恶的。你是系统的一部分，你制造系统的邪恶方面，削减知识，因为你认为你拥有真相。（对我来说几乎是Godwin的观点）

我的答案＃2在两年内仍然可以，这个将在一年内过时。模块版本，node.js死于io.js等等。

是的，愚蠢真的是 stackoverflowing 我！

Answer 2

您可以尝试browsersync

编辑：这个答案是我之前回答的副本，由Eran，martin clayton和SonerGönül于20年2月删除。

以下是我对此的观点：

有些SO 传感器认为我之前的回答显然没用，所以他们决定关闭它。 难以置信！他们只是想让他们的观点占上风，即使他们正在破坏知识。

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

当您谈到个人博客的链接时，仅链接答案参数就可以了。软件网页的链接应该是持久的，主要是因为它是广泛采用的。

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

Answer 3

自PR #5142合并到母版以来，其他答案已过时。

使用jekyll serve --livereload调用。

Jekyll自动重装客户端？

3 个答案:

简介

Prerequisits

化身

节点模块

Gulp设置

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