Jekyll + Polymer + Vulcanize - How does this work?

Question

I just started integrating Polymer into my Jekyll environment. Essentially, I created a bower.json file in my Jekyll root that calls for followingdepencendies:

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

After running bower install in my Jekyll root, I ge the bower_components folder with all Polymer packages I requested. In my Jekyll template's head.html, I include

<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">
 ...

in order to integrate the desired Polymer packages. I run jekyll serve to create and see the page. So far so good.

However, I feel this may produce a long loading time for my page, not? I'm, almost sure Google's own website speed test would ask me to reduce the number of http calls. As I discovered, Polymer provides a package named vulcanize to combine the http requests into one: https://github.com/polymer/vulcanize

Honestly, I have no clear idea how to integrate this into my process. I've seen some docs that talk about grunt but honestly I have no idea about that.

Can anyone provide a small input on how to compress my Polymer featured Jekyll page (html, html calls, css...) ? Thanks!

Answer 1

I had this same issue and finally got around to a solution, in case you're still working on this. (Originally posted here)

I used Gulp, copying the Polymer Starter Kit (1.2.3). I used the package.json, tasks/ directory, and modified gulpfile.js. I changed the behavior of the default and serve tasks to run Jekyll serve and build in the shell. I also changed directory references in the gulpfile to vulcanize the files in app/_site/ instead of 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);
  }
});

Using BrowserSync would have a much cleaner effect, but this is a simple way to get Jekyll functionality and the benefit of vulcanization for production. (Note that you also have to install the yargs package to handle port specification.) My whole gulpfile is here.