使用 Jekyll 设置 Polymer？

Question

我正在尝试将 Polymer 与 Jekyll 站点一起使用，但我不知道如何进行设置。我下载并可以运行 Polymer 初学者工具包。 Polymer 在 app 目录中有页面内容，但是如果我尝试从这个文件夹中设置和运行 Jekyll，我会收到一大堆错误，因为 Polymer index.html 找不到资源（因为根目录不同）。

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

Answer 1

阅读 polymer started kit readme.md paragraph development workflow 你了解到：

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

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

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

Answer 2

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

Answer 3

我刚回来，自去年夏天以来情况有了很大改善。我基于 Polymer Starter Kit (1.2.3) 制作了一个 gulpfile。但是我将 default 和 serve 任务的行为更改为运行 Jekyll 服务并在 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.

使用 Jekyll 设置 Polymer？

Setting up Polymer with Jekyll?

jekyll

polymer