使用 Jekyll 设置 Polymer？答案

【问题标题】：Setting up Polymer with Jekyll?使用 Jekyll 设置 Polymer？
【发布时间】：2015-06-11 23:58:09
【问题描述】：

我正在尝试将 Polymer 与 Jekyll 网站一起使用，但我不知道如何设置。我下载并可以运行 Polymer Starter Kit。 Polymer 在app 目录中有页面内容，但是如果我尝试从该文件夹设置和运行 Jekyll，我会收到很多错误，因为 Polymer index.html 找不到资源（因为根目录是不同）。

Jekyll 和 Polymer 协同工作的正确设置和结构方式是什么？

【问题讨论】：

虽然比您需要的更复杂，但聚合物文档使用 Jekyll + 聚合物。我会浏览该来源，看看我们做了什么：github.com/polymer/docs。
谢谢。我还没有让文档在本地运行，但这绝对是一个很好的起点。

标签： polymer jekyll

【解决方案1】：

阅读聚合物入门套件readme.md paragraph development workflow 你会了解到：

gulp serve 用于开发阶段，gulp 构建您的应用程序，准备部署在 Web 服务器上。

仅仅将你从 github 下载的内容复制到网络服务器上是行不通的as is，因为gulp serve 比这更复杂。阅读gulpfile.js，您将看到gulp serve 命令所做的所有事情。

您需要执行gulp，然后您可以部署在dist 文件夹中生成的内容。这将适用于 jekyll 站点。

【讨论】：

【解决方案2】：

您可以将gulp-jekyll 集成到您的 gulp 构建过程中。我还考虑在您的浏览器同步中观察更改，以便在更改时自动生成 html 文件。只有在部署时才应进行硫化过程。

【讨论】：

【解决方案3】：

我刚回到这个问题上，自去年夏天以来情况有了很大改善。我基于 Polymer Starter Kit (1.2.3) 制作了一个 gulpfile。但是我改变了default 和serve 任务的行为来运行 Jekyll serve 并在 shell 中构建：

var spawn = require('child_process').spawn;
var argv = require('yargs').argv;

gulp.task('jekyllbuild', function(done) {
  return spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' })
      .on('close', done);
});

// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
  // Uncomment 'cache-config' if you are going to use service workers.
  runSequence(
    'jekyllbuild',
    ['ensureFiles', 'copy', 'styles'],
    'elements',
    ['images', 'fonts', 'html'],
    'vulcanize', // 'cache-config',
    cb);
});

gulp.task('serve', function(done) {
  if (argv.port) {
    return spawn('bundle', ['exec', 'jekyll', 'serve', '--port=' + argv.port], { stdio: 'inherit' })
        .on('close', done);
  } else {
    return spawn('bundle', ['exec', 'jekyll', 'serve'], { stdio: 'inherit' })
        .on('close', done);
  }
});

使用 BrowserSync 会产生更清洁的效果，但这是获得 Jekyll 功能和生产硫化优势的简单方法。（请注意，您还必须安装 yargs 包来处理端口规范。）我的整个 gulpfile 是 here。

【讨论】：