Jekyll + Polymer + Vulcanize - 这是如何工作的？答案

【问题标题】：Jekyll + Polymer + Vulcanize - How does this work?Jekyll + Polymer + Vulcanize - 这是如何工作的？
【发布时间】：2016-03-27 12:56:56
【问题描述】：

我刚刚开始将 Polymer 集成到我的 Jekyll 环境中。本质上，我在我的 Jekyll 根目录中创建了一个 bower.json 文件，它需要以下依赖项：

...
],
 "dependencies": {
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.1",
"polymer": "Polymer/polymer#^1.2.0"
  }
}

在我的 Jekyll 根目录中运行 bower install 后，我找到了 bower_components 文件夹，其中包含我请求的所有 Polymer 包。在我的 Jekyll 模板的 head.html 中，我包含了

<link rel="import" href="{{ site.baseurl }}/bower_components/paper-item/paper-item.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="{{ site.baseurl }}/bower_components/iron-flex-layout/iron-flex-layout.html">
 ...

为了集成所需的聚合物包。我运行jekyll serve 来创建和查看页面。到目前为止一切顺利。

但是，我觉得这可能会导致我的页面加载时间过长，不是吗？我几乎可以肯定 Google 自己的网站速度测试会要求我减少 http 调用的数量。正如我发现的那样，Polymer 提供了一个名为 vulcanize 的包来将 http 请求合并为一个：https://github.com/polymer/vulcanize

老实说，我不清楚如何将其整合到我的流程中。我看过一些谈论 grunt 的文档，但老实说，我对此一无所知。

谁能提供关于如何压缩我的 Polymer 特色 Jekyll 页面的小建议（html、html 调用、css...）？谢谢！

【问题讨论】：

从 github 获取 'polymer starter kit'，然后深入研究 'serve ' 与 'serve prod' 的 gulp 任务。 prod 任务会将 vulcanize 任务输出到 ./dist ，您可以查看详细信息。
对不起，有人可以提供一个使用 vulcanize 与 gulp 和 Jekyll+Polymer 的示例吗？看来这个话题有点悬而未决。 https://github.com/jekyll/jekyll-assets/issues/155
重新“jekyll-polymer”要求。当与 PSK 的 gulp 集成涵盖托管/服务静态页面时，为什么您甚至需要 jekyll 来处理静态内容。从表面上看 git/PSK 项目以及“里面”有什么。您可能会得出结论，jekyll 对聚合物和 PSK 是多余的？我过去使用过最少的 git-hub 页面和 jekyll 的东西，并且不会真正考虑使用新的聚合物项目，因为 gulp 涵盖了我需要 jekyll 的任何东西。他们正在尝试使“硫化”步骤正常工作，以便您为您的网络主机包装 gulpTask.start 命令所要做的一切。

标签： polymer jekyll bower polymer-1.0 vulcanize

【解决方案1】：

我遇到了同样的问题，终于找到了一个解决方案，以防你还在解决这个问题。（原贴here）

我使用 Gulp，复制 Polymer Starter Kit (1.2.3)。我使用了package.json、tasks/ 目录，并修改了gulpfile.js. 我更改了default 和serve 任务的行为以运行Jekyll serve 并在shell 中构建。我还更改了 gulpfile 中的目录引用以硫化 app/_site/ 而不是 app/ 中的文件。

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。

【讨论】：