Vulcanize：inlineCss 不适用于 Polymer 1.0 项目

Question

我有一个 Polymer 1.0 项目，我想对其进行 Vulcanize 以进行生产。为此，我将 Gulp 与 gulp-vulcanize 结合使用。

我的 gulpfile.js 文件：

var gulp = require('gulp');
var Vulcanize = require('gulp-vulcanize');

gulp.task('vulcanize', function () {
    return gulp.src('./src/app.html')
        .pipe(Vulcanize({
            inlineCss: true
        }))
        .pipe(gulp.dest('./dist'));
});

src/app.html内容如下：

<!-- Polymer elements -->
<link rel="import" href="../bower_components/google-map/google-map.html" />
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" />
<link rel="import" href="../bower_components/paper-button/paper-button.html" />
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" />
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import" href="../bower_components/paper-item/paper-item.html" />
<link rel="import" href="../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../bower_components/paper-menu/paper-menu.html" />
<link rel="import" href="../bower_components/paper-progress/paper-progress.html" />
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html" />
<link rel="import" href="../bower_components/paper-toast/paper-toast.html" />
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" />

问题：进程没有完成也没有产生错误。

运行ning gulp vulcanize时的CMD输出：

C:\Stuff\myApp>gulp vulcanize
[15:45:06] Using gulpfile C:\Stuff\myApp\gulpfile.js
[15:45:06] Starting 'vulcanize'...

C:\Stuff\myApp>

但是，当我将inlineCss设置为false时，进程会运行。这种情况下的 CMD 输出是：

C:\Stuff\myApp>gulp vulcanize
[15:44:55] Using gulpfile C:\Stuff\myApp\gulpfile.js
[15:44:55] Starting 'vulcanize'...
[15:44:55] Finished 'vulcanize' after 581 ms

C:\Stuff\myApp>

但是，显然，CSS 不是内联。

编辑:

我现在运行将 vulcanize 作为独立工具使用，但出现此错误：

{ [Error: ENOENT, open 'C:\Stuff\myApp\wer_components\paper-drawer-panel\paper-drawer-panel.css']
    errno: 34,
    code: 'ENOENT',
    path: 'C:\Stuff\myApp\wer_components\paper-drawer-panel\paper-drawer-panel.css' }
Error: ENOENT, open 'C:\Stuff\myApp\wer_components\paper-drawer-panel\paper-drawer-panel.css'

请注意，它尝试访问 C:\Stuff\myApp\wer_components 文件夹而不是 C:\Stuff\myApp\bower_components。它以某种方式在文件夹名称中丢失了 bo，但我似乎无法弄清楚如何。

Answer 1

我也遇到了同样的问题。目前 inlineCSS 存在一个错误。您可以在 https://github.com/PolymerElements/polymer-starter-kit/issues/62

阅读更多内容

Answer 2

我已经解决了这个问题，但是这个解决方案有点不寻常。首先，我阅读了很多关于绝对路径的问题，所以我将所有路径从绝对路径更改为相对路径并提供了 abspath: '' 选项。

然而，这仍然没有解决问题，因为我得到了 no resolver found 错误，这也与绝对路径问题有关。

经过幸运的猜测，我找到了罪魁祸首-fonts.googleapis.com。

为什么这是个问题？ CSS 包含外部字体和 Google 托管字体如下：

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">

他们使用无协议 URLs 以保留当前页面的 HTTP(s) 状态。但是这个表示法在路径的开头有两个斜杠 (//)，它有点混淆了内联过程。它可能将路径视为文件而不是 URL.

因此，gulp 任务的完整修复如下：

var gulp = require('gulp');
var Vulcanize = require('gulp-vulcanize');

gulp.task('vulcanize', function () {
    return gulp.src('src/app.html')
        .pipe(Vulcanize({
            abspath: '',
            inlineScripts: true,
            inlineCss: true,
            stripExcludes: false,
            excludes: ['//fonts.googleapis.com/*'],
        }))
        .pipe(gulp.dest('dist'));
});

希望其他人觉得这很有用。

此外，如果有人认为 // 路径问题是一个错误，请报告。

Answer 3

问题：查找纸抽屉-panel.css 纸项-shared.css 纸菜单-shared.css page.js

时出错

解决方法： gulpfile.js -> 任务副本需要更正。 bower_components 必须从 ./app 目录复制。

旧

var bower = gulp.src([
    'bower_components/**/*'
]).pipe(gulp.dest('dist/bower_components'));

新

var bower = gulp.src([
    'app/bower_components/**/*'
]).pipe(gulp.dest('dist/bower_components'));

Vulcanize：inlineCss 不适用于 Polymer 1.0 项目

Vulcanize: inlineCss not working on Polymer 1.0 project

polymer

gulp

polymer-1.0