Jekyll自动重新加载客户端



这里有一个关于Jekyll自动重载的问题,但它只用于文件生成方面的"重载"。

我还希望我的浏览器在更新Jekyll文件后自动刷新页面,就像Meteor(开箱即用)和DocPad(docpad install livereload)一样。我怎么能和杰基尔一起直播重装?

由于PR#5142被合并到master,其他答案已经过时。

使用jekyll serve --livereload调用。

简介

我重复使用了旧的但高效的shakyShane/jekyll gump sass浏览器同步代码。

由于Jekyll现在包含了本地sass/scs处理,我只留下了在Gulp任务中使用browsersync所需的命令

先决条件

你需要杰基尔,节点和Npm。

注意:这只在Ubuntu 14.04上测试过。苹果和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设置

在工作文件夹的根目录下创建一个gullfile.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)

这就是我所说的建设性行动。我经营着一家企业,我为社区尽我所能。有时我只有一点时间可以给予,但我以建设性的方式给予,努力为他人找到解决方案,而不是纠缠于两者之间!试图证明我可以是邪恶的。你是系统的一部分,你制造了系统的邪恶一面,因为你认为自己拥有真相而切割知识。(对我来说,这几乎是戈德温的一分)

我的答案#2在两年后仍然可以,这个答案在一年后就会过时。模块版本,node.js逐渐支持io.js等等。

是的,愚蠢真的让我大吃一惊!

您可以尝试浏览同步

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

以下是我对此的看法:

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

我提供了一个到browsersync.io的链接,认为复制任何示例代码都没有用,因为最新的文档在browsersync.io上

当你谈论到个人博客的链接时,仅链接答案的论点是可以的。软件网页的链接应该是持久的,主要是如果它是一个被广泛采用的链接。

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

最新更新