Jekyll +聚合物+硫化-這是如何工作的？

Question

我剛剛開始將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之后，將包含我請求的所有Polymer軟件包的bower_components文件夾放入ge。 在我的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呼叫的次數。 正如我發現的，Polymer提供了一個名為vulcanize的軟件包，可將http請求合並為一個： https : //github.com/polymer/vulcanize

老實說，我不清楚如何將其集成到我的流程中。 我看過一些有關grunt文檔，但老實說，我對此一無所知。

誰能提供一些關於如何壓縮我的Polymer特色Jekyll頁面 （html，html調用，css ...）的信息？ 謝謝！

Answer 1

我也遇到了同樣的問題，終於找到了解決方案，以防萬一您還在努力。 （最初在此處發布）

我使用Gulp，復制了Polymer Starter Kit （1.2.3）。 我使用了package.json ， tasks/目錄和修改后的gulpfile.js. 我更改了default和serve任務的行為，以運行Jekyll服務並在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在這里 。