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!

get the 'polymer starter kit' from github and then dig into the gulp task for 'serve ' vs 'serve prod' . the prod task will output vulcanize task to ./dist and you can look into details of whats going on. — Robert Rowntree, Dec 22 '15 at 21:57
I'm sorry, but could someone provide an example of using vulcanize with gulp and Jekyll+Polymer? It seems this topic is little unsolved. [https://github.com/jekyll/jekyll-assets/issues/155](https://github.com/jekyll/jekyll-assets/issues/155) — JohnnyDeer, Dec 28 '15 at 19:44
Re 'jekyll-polymer' requirement. Why do you even need jekyll for static stuff when the gulp integration with the PSK covers hosting/serving static pages. take the git/PSK project at face value and what's 'in there'. you may conclude that jekyll's redundant with polymer & PSK?? I've used minimal git-hub pages and jekyll stuff in the past and would not really consider it with new polymer projects because gulp covers whatever i would have needed jekyll for. They are trying to make 'vulcanize' step just work so that all you have to do to wrap a gulpTask.start command for your web host. — Robert Rowntree, Dec 28 '15 at 20:38

score 0 · Answer 1 · edited May 23 '17 at 11:44

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.

Jekyll + Polymer + Vulcanize - How does this work?

1 Answers1