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

問題 ：進程沒有完成也沒有產生錯誤。

運行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

我已經解決了這個問題，但解決方案有些不同尋常。 首先，我閱讀了很多關於絕對路徑問題的內容，因此我將所有路徑從絕對路徑更改為相對路徑並提供了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'));
});

希望別人覺得這很有用。

此外，如果有人認為//路徑問題是一個錯誤，請報告。

Answer 2

我也有同樣的問題。 目前inlineCSS存在漏洞。 您可以在https://github.com/PolymerElements/polymer-starter-kit/issues/62上閱讀更多內容。

Answer 3

問題：錯誤找到paper-drawer-panel.css paper-item-shared.css paper-menu-shared.css page.js

解決方案：需要更正gulpfile.js - >任務副本。 必須從./app目錄復制bower_components。

舊

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'));