Vulcanize:inlineCss不适用于Polymer 1.0项目

Question

我有一个Polymer 1.0项目,我想要进行硫化生产.我使用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" />

问题:进程没有完成也没有产生错误.

运行时的CMD输出gulp vulcanize:

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

我已经解决了这个问题,但解决方案有些不同寻常.首先,我阅读了很多关于绝对路径问题的内容,因此我将所有路径从绝对路径更改为相对路径并提供了abspath: ''选项.

但是,这仍然没有解决问题,因为我得到了no resolver found错误,这也与绝对路径问题有关.

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

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

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

它们使用无协议URL以保留当前页面的HTTP状态.但是这个符号//在路径的开头有两个斜杠(),它有点混淆了内嵌过程.它可能将路径视为文件而不是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'));
});

希望别人觉得这很有用.

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