![](/img/trans.png)
[英]In Polymer 1.0 vulcanize + IE does not work for paper-drawer-panel
[英]Jekyll + Polymer + Vulcanize - How does this work?
我刚刚开始将Polymer集成到我的Jekyll环境中。 本质上,我在Jekyll根目录中创建了bower.json文件,该文件要求以下依赖:
...
],
"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文件夹放入ge。 在我的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
创建并查看页面。 到现在为止还挺好。
但是,我认为这可能会导致页面加载时间较长,不是吗? 我几乎可以肯定,谷歌自己的网站速度测试会要求我减少http呼叫的次数。 正如我发现的,Polymer提供了一个名为vulcanize
的软件包,可将http请求合并为一个: https : //github.com/polymer/vulcanize
老实说,我不清楚如何将其集成到我的流程中。 我看过一些有关grunt
文档,但老实说,我对此一无所知。
谁能提供一些关于如何压缩我的Polymer特色Jekyll页面 (html,html调用,css ...)的信息? 谢谢!
我也遇到了同样的问题,终于找到了解决方案,以防万一您还在努力。 (最初在此处发布)
我使用Gulp,复制了Polymer Starter Kit (1.2.3)。 我使用了package.json
, tasks/
目录和修改后的gulpfile.js.
我更改了default
和serve
任务的行为,以运行Jekyll服务并在shell中进行构建。 我还更改了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在这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.