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 является не в подкладке.

EDIT:

Я теперь побежал вулканизацию как самостоятельный инструмент и получил эту ошибку:

{ [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.

Почему это проблема? CSS включает внешние и Google принимал шрифты следующего:

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

Они используют протокол меньше URL-адреса с целью сохранения состояния HTTP (s) текущей страницы. Но эта нотация имеет две слэши (//) в начале пути и несколько смущает процесс подкладки. Вероятно, он рассматривает путь как файл не как URL-адрес.

Таким образом, полное исправление для выполнения этой задачи глотком заключается в следующем:

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

Проблема: ОШИБКА найти бумагу ящика-panel.css бумаги пункт-shared.css бумаги меню shared.css page.js

Решение: The gulpfile.js -> Задача копия должна исправить. Компоненты bower_components должны быть скопированы из каталога ./app.

OLD

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