Vulcanize: inlineCss not working on Polymer 1.0 project
I have a Polymer 1.0 project that I want to Vulcanize for production. For this I am using Gulp with gulp-vulcanize
.
My gulpfile.js
file:
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'));
});
The content is as src/app.html
follows:
<!-- 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" />
Problem : The process does not terminate and an error occurs.
CMD output on startup 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>
However , the process is executed when I install inlineCss
in false
. CMD output in this case:
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>
But obviously no CSS is inserted.
EDIT
Now I did vulcanize as a standalone tool and got this error:
{ [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'
Note that it tries to access the folder C:\Stuff\myApp\wer_components
instead C:\Stuff\myApp\bower_components
. Somehow it loses bo
in the folder name, but I can't figure out how to do it.
source to share
I solved the problem, but the solution is somewhat unusual. First, I read a lot about the problems with absolute paths, so I changed all paths from absolute to relative and provided a parameter abspath: ''
.
However, this did not solve the problem yet, as I got an error no resolver found
that is also related to the absolute path problem.
After a happy guess, I found the culprit - fonts.googleapis.com
.
Why is this a problem? The CSS for external and Google hosted fonts looks like this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
They use no-protocol URLs to keep the HTTP state (s) of the current page. But this notation has two slashes ( //
) at the beginning of the path and confuses the insertion process a little. This path is probably seen as a file not as a URL.
So the full fix for the gulp task is:
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'));
});
Hope someone else finds this helpful.
Also, if anyone thinks the tracing issue //
is a bug, please report it.
source to share
I have the same problem. There is currently a bug with inlineCSS. You can read more at https://github.com/PolymerElements/polymer-starter-kit/issues/62
source to share
Problem: ERROR finding document-drawer-panel.css paper-item-shared.css paper-menu-shared.css page.js
Solution: Copy a copy of the gulpfile.js task →. The bower_components must be copied from the directory. / app.
OLD
var bower = gulp.src([
'bower_components/**/*'
]).pipe(gulp.dest('dist/bower_components'));
NEW
var bower = gulp.src([
'app/bower_components/**/*'
]).pipe(gulp.dest('dist/bower_components'));
source to share