Вулканизация: inlineCss не работает над проектом Polymer 1.0

У меня есть проект 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 не встроен.

ИЗМЕНИТЬ:

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

{ [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 в имени папки, но я не могу понять, как это сделать.


gulp polymer polymer-1.0
person alesc    schedule 13.06.2015    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Я решил проблему, но решение несколько необычное. Во-первых, я много читал о проблемах с абсолютными путями, поэтому я изменил все пути с абсолютных на относительные и поставил опцию 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-адрес.

Итак, полное исправление задачи 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'));
});

Надеюсь, что кто-то еще найдет это полезным.

Кроме того, если кто-то считает, что проблема пути // является ошибкой, пожалуйста, сообщите об этом.

person alesc    schedule 28.06.2015

arrow_upward
1
arrow_downward

У меня точно такая же проблема. В настоящее время есть ошибка с inlineCSS. Вы можете прочитать больше на https://github.com/PolymerElements/polymer-starter-kit/issues/62

person Chariyski    schedule 21.06.2015
comment
Спасибо за находку. Я боялся, что это будет ошибка, так как мой пример очень прост и взят из документации. Любое обходное решение, пока они не исправят это? - person alesc; 21.06.2015
comment
Я пытался объединить нужные мне файлы css, но это приводит к ошибкам с компонентами, имеющими одинаковые классы css. Теперь я вернулся к исходной точке - person Chariyski; 21.06.2015
comment
Хотя ваш пост не решил проблему, я дал вам награду, так как срок ее действия истекает завтра (и никто ее не получит). Если вам удастся ее решить, я также дам вам Принятый ответ. - person alesc; 26.06.2015
comment
Я решил проблему и опубликовал ответ. Это также решает вашу проблему? - person alesc; 28.06.2015
comment
Позже сегодня я проверю, решит ли это и мою проблему. - person Chariyski; 30.06.2015

arrow_upward
1
arrow_downward

Проблема: ОШИБКА при поиске paper-drawer-panel.css paper-item-shared.css paper-menu-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'));
person Rolf    schedule 31.08.2015