Jekyll + Polymer + Vulcanize - Как это работает?

Question

Я только начал интегрировать Polymer в свою среду Jekyll. По сути, я создал файл bower.json в корне Jekyll, который требует следующих зависимостей:

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

После запуска bower install в моем корне Jekyll я получаю папку 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 но, честно говоря, я понятия не имею об этом.

Может ли кто-нибудь предоставить небольшой материал о том, как сжимать мою Jekyll-страницу из Polymer (html, html Calls, CSS...) ? Спасибо!

Answer 1

У меня была такая же проблема, и, наконец, я нашел решение, если вы все еще работаете над этим. (Первоначально опубликовано здесь)

Я использовал Gulp, копируя Polymer Starter Kit (1.2.3). Я использовал package.json, tasks/ каталог и модифицированный gulpfile.js. Я изменил поведение default а также serve Задачи для запуска 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 пакет для обработки спецификации порта.) Весь мой gulpfile здесь.