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

Я только начал интегрировать 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">
 ...

для интеграции нужных пакетов Polymer. Я запускаю jekyll serve для создания и просмотра страницы. Все идет нормально.

Однако я чувствую, что это может привести к длительной загрузке моей страницы, не так ли? Я почти уверен, что собственный тест скорости веб-сайта Google попросит меня уменьшить количество HTTP-вызовов. Как я обнаружил, Polymer предоставляет пакет с именем vulcanize для объединения HTTP-запросов в один: https://github.com/polymer/vulcanize

Честно говоря, я понятия не имею, как интегрировать это в свой процесс. Я видел некоторые документы, в которых говорится о grunt, но, честно говоря, я понятия не имею об этом.

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


jekyll polymer bower polymer-1.0 vulcanize
person JohnnyDeer    schedule 21.12.2015    source источник
comment
получите «полимерный стартовый комплект» на github, а затем покопайтесь в задаче gulp для «serve» vs «serve prod». задача prod выведет задачу вулканизации в ./dist, и вы сможете подробно изучить происходящее.   -  person Robert Rowntree    schedule 23.12.2015
comment
Извините, но может ли кто-нибудь привести пример использования вулканизации с gulp и Jekyll+Polymer? Кажется, эта тема мало раскрыта. https://github.com/jekyll/jekyll-assets/issues/155   -  person JohnnyDeer    schedule 28.12.2015
comment
Требование Re 'jekyll-polymer'. Зачем вам вообще нужен jekyll для статических вещей, когда интеграция gulp с PSK охватывает хостинг/обслуживание статических страниц. примите проект git/PSK за чистую монету и то, что «там». Вы можете заключить, что jekyll избыточен с полимером и PSK ?? В прошлом я использовал минимальные страницы git-hub и jekyll и не стал бы рассматривать его с новыми полимерными проектами, потому что gulp покрывает все, для чего мне понадобился бы jekyll. Они пытаются заставить шаг «вулканизировать» просто работать, так что все, что вам нужно сделать, это обернуть команду gulpTask.start для вашего веб-хостинга.   -  person Robert Rowntree    schedule 28.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

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

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

person Julia Ebert    schedule 23.02.2016