杰基尔+聚合物+硫化-这是如何工作的？

Question

我刚开始把聚合物整合到我的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文件夹与我所请求的所有聚合物包合并。在我的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来创建和查看页面。到目前一切尚好。

但是，我觉得这可能会给我的页面带来很长的加载时间，不是吗？我，几乎可以肯定谷歌自己的网站速度测试会要求我减少http电话的数量。正如我所发现的，聚合物提供了一个名为vulcanize的包来将http请求组合成一个：https://github.com/polymer/vulcanize。

老实说，我不清楚该如何将其集成到我的过程中。我见过一些谈论grunt的文档，但老实说，我对此一无所知。

任何人都可以提供一个关于如何压缩我的聚合物特色的页面( html，html调用，css.) 的小输入！

Answer 1

我也有过同样的问题，最后找到了一个解决方案，以防你还在努力。(最初张贴在这里上)

我使用了Gulp，复制了聚合物起动机试剂盒 (1.2.3)。我使用了package.json、tasks/目录并修改了gulpfile.js. --我更改了default和serve任务的行为，以在shell中运行Jekyll服务和构建。我还更改了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包来处理端口规范。)我的整个吞咽文件都是这里。