Question

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

Jekyll和Polymer一起合作的设置和结构的正确方法是什么？

Answer 1

阅读聚合物启动试剂盒readme.md paragraph development workflow您了解到：

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

只是在web服务器上复制你从github下载的内容将无效as is，因为gulp serve比这更复杂。阅读gulpfile.js，您将看到gulp serve命令所做的全部工作。

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

Answer 2

您可以在您的gulp构建过程中集成gulp-jekyll。我还考虑在浏览器同步中观察更改，以便在更改时自动生成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？

3 个答案: