2

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

Jekyll ルートで実行bower installした後、要求したすべての Polymer パッケージを含む bower_components フォルダーを取得します。私の 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 はvulcanizehttp リクエストを 1 つに結合するという名前のパッケージを提供します: https://github.com/polymer/vulcanize

正直なところ、これを自分のプロセスに統合する方法が明確にわかりません。について話しているドキュメントを見たことgruntがありますが、正直なところ、それについてはわかりません。

Polymer を使用した Jekyll ページ(html、html 呼び出し、css...)を圧縮する方法について、誰かが簡単な情報を提供できますか? ありがとう！

4

1 に答える 1

0

私はこれと同じ問題を抱えていて、あなたがまだこれに取り組んでいる場合に備えて、最終的に解決策にたどり着きました. （もともとここに投稿されました）

Polymer Starter Kit (1.2.3)をコピーして Gulp を使用しました。package.json,tasks/ディレクトリを使用し、およびタスクgulpfile.js.の動作を変更して、Jekyll サービスを実行し、シェルでビルドしました。また、gulpfile のディレクトリ参照を変更して、ファイルをバルカナイズするようにしました。defaultserveapp/_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 はhereです。

于 2016-02-23T13:52:19.980 に答える