Vulcanize not working from gulpfile

[devAtPolydeals]

gulp created the elements.vulcanized.html file in my 'dist' folder but did not actually vulcanize it, elements.vulcanized.html and elements.html have the same content.

Looking further i found that gulp ends abruptly on vulcanize. See screenshot

[devAtPolydeals]

I installed it on another machine, same problem exists for me. I am using Windows OS with node Ver. 0.12.2.

[addyosmani]

I'll keep this open in case anyone is able to reproduce. On my system, it's vulcanizing correctly:

[manustays]

I have the same problem. The command 'gulp' ends abruptly on vulcanize.

Same thing happens when I do 'gulp serve:dist'. It ends abruptly on vulcanize just like the screenshot posted by devAtPolydeals.

[addyosmani]

Are you using Windows too @manustays?

[devAtPolydeals]

I tried to then run vulcanize directly on the file, it gave me an error saying ".../bower_components/page/page.js" not found. I manually copied the folder in 'dist' directory, ran vulcanize again and it worked. @manustays, can you run vulcanize independently and see if you have the same problem?

[wq9]

Here's the error that I get using

.on( "error", function( err ) {
   console.log( err );
})

gulp-vulcanize works fine if I remove inlineCss and inlineScripts.

[addyosmani]

@wq9 Thanks for the additional details. Just to confirm, the elements are getting correctly vulcanized in elements.vulcanized.html as long as the inlineCss and inlineScripts options are disabled?.

@devAtPolydeals as it looks like this is working on Windows without the two options above can you try that too? It'll help us narrow down where things are breaking.

[devAtPolydeals]

@addyosmani no unfortunately it did not.
@wq9 where did you add .on('error')? i added it but didn't see anything in the console, is this what you did:

gulp.task('vulcanize', function () {
  var DEST_DIR = 'dist/elements';

  return gulp.src('dist/elements/elements.vulcanized.html')
    .pipe($.vulcanize({
      dest: DEST_DIR,
      strip: true
    }))
    .pipe(gulp.dest(DEST_DIR))
    .pipe($.size({title: 'vulcanize'}))
    .on( "error", function( err ) {
    console.log( err );
    });
}); 

[wq9]

@devAtPolydeals

    .pipe($.vulcanize({
      //abspath: 'C:\\',
      //strip: true,
      //inlineCss: true,
      //inlineScripts: true,
      stripComments: true,
      //excludes: [],
    }))
    .on( "error", function( err ) {
      console.log( err );
    })
    .pipe(gulp.dest('dist/elements'))
    .pipe($.size({title: 'vulcanize'}));

@addyosmani The elements are correctly vulcanized when those inline options are disabled like above.

[devAtPolydeals]

@wq9 ... it didn't work for me. I get below blob:

[wq9]

@devAtPolydeals It's probably because of the spaces in the file path in Program Files (x86). Can you try with your C:\wamp\www path?

[wq9]

Also, vulcanize itself works fine with inline, so I guess it probably has to do with gulp-vulcanize?

[devAtPolydeals]

@wq9 good point. Yes, i concur that vulcanize itself works fine.

[wq9]

OK, I know what's the problem. In node_modules\gulp-vulcanize\index.js:23, file.path will produce an absolute path that starts with C:\folder\....

Vulcanize doesn't work with C:\... paths?

So I put

vulcanize.process("dist/elements/elements.vulcanized.html", function (err, inlinedHtml) {

and it worked...

[devAtPolydeals]

@wq9 where did you put

vulcanize.process("dist/elements/elements.vulcanized.html", function (err, inlinedHtml) {

[wq9]

@devAtPolydeals I put that line in node_modules\gulp-vulcanize\index.js line 23. (Replace file.path with dist/elements/elements.vulcanized.html). But that is a temporary fix.

[manustays]

Hi @addyosmani, I'm using Linux (Ubuntu 14.04) with gulp v3.8.11 & node v0.13.0-pre.

After adding error handling function in gulpfile.js (as per @devAtPolydeals) without commenting out any line, I get the following error message:

{ [Error: ENOENT, open '/home/abhi/CODING/Google%20Polymer/polymer-starter-kit-1.0.0/dist/elements/elements.vulcanized.html']
errno: -2,
code: 'ENOENT',
path: '/home/abhi/CODING/Google%20Polymer/polymer-starter-kit-1.0.0/dist/elements/elements.vulcanized.html',
name: 'Error',
message: 'ENOENT, open '/home/abhi/CODING/Google%20Polymer/polymer-starter-kit-1.0.0/dist/elements/elements.vulcanized.html'',
stack: 'Error: ENOENT, open '/home/abhi/CODING/Google%20Polymer/polymer-starter-kit-1.0.0/dist/elements/elements.vulcanized.html'\n at Error (native)',
fileName: '/home/abhi/CODING/Google Polymer/polymer-starter-kit-1.0.0/dist/elements/elements.vulcanized.html',
showStack: false,
showProperties: true,
plugin: 'gulp-vulcanize' }

Even after commenting out strip, inlineCss and inlineScripts, I get the same error.

When I run vulcanize independently on index.html (vulcanize -v index.html), at first I got the error that folder 'bower_components' not found in the 'app' folder. After copying 'bower_components', the vulcanize command works as expected.

The command

vulcanize --inline-scripts --inline-css --strip-comments elements.html

works fine.

[manustays]

UPDATE: Issue resolved.

My issue was simple: I was using path where a folder name contained space. Gulp was converting it into %20 and was failing.

Thanks a lot guys for putting your time into our issues :)

[devAtPolydeals]

@wp9 you were right, my issue was resolved after i deployed it in C:\wamp\www... i think the spaces in folder name is messing up vulcanize and i had to change the vulcanize gulp task to:

gulp.task('vulcanize', function () {
  var DEST_DIR = 'dist/elements';

  return gulp.src('dist/elements/elements.vulcanized.html')
    .pipe($.vulcanize({
      dest: DEST_DIR,
      stripComments: true
    }))
    .pipe(gulp.dest('dist/elements'))
    .pipe($.size({title: 'vulcanize'}));
});

I am closing this issue, unless someone wants to adds to it?

For some one who lands on this page in future; to fix vulcanizing issue in windows do following:

1. Make sure there are no spaces in your deployed app's windows path
2. Change the gulp task in gulpfile.js to above

[kaldrenon]

FWIW, I had the vulcanize step fail on me the first time I ran the default gulp task, but it worked the second time.

First run:

→ gulp
[14:19:18] Using gulpfile ~/Dropbox/code/polymer-starter-kit/gulpfile.js
[14:19:18] Starting 'clean'...
[14:19:18] Finished 'clean' after 4.57 ms
[14:19:18] Starting 'default'...
[14:19:18] Starting 'copy'...
[14:19:18] Starting 'styles'...
[14:19:19] 'styles' all files 98 B
[14:19:19] Finished 'styles' after 1.01 s
[14:19:19] 'copy' all files 21.88 kB
[14:19:19] Finished 'copy' after 1.18 s
[14:19:19] Starting 'elements'...
[14:19:19] 'elements' all files 0 B
[14:19:19] Finished 'elements' after 9.24 ms
[14:19:19] Starting 'jshint'...
[14:19:20] Starting 'images'...
[14:19:20] Starting 'fonts'...
[14:19:20] Starting 'html'...
[14:19:21] 'fonts' all files 0 B
[14:19:21] Finished 'fonts' after 918 ms
[14:19:22] Finished 'jshint' after 2.47 s
[14:19:22] 'images' all files 25.09 kB
[14:19:22] Finished 'images' after 2.05 s
[14:19:22] 'html' all files 4.34 kB
[14:19:22] Finished 'html' after 1.12 s
[14:19:22] Starting 'vulcanize'...

Second run, I got the above plus:

[15:26:21] 'vulcanize' all files 424.93 kB
[15:26:21] Finished 'vulcanize' after 1.15 s
[15:26:21] Starting 'precache'...
[15:26:21] Finished 'precache' after 5.22 ms
[15:26:21] Finished 'default' after 6.63 s

Made no code changes in between runs. After the first run, elements.vulcanized.html was identical to elements.html. After the second run, it is now fully vulcanized as expected.

[Cammisuli]

Does anyone know why leaving the inlineCss and inlineScripts properties in the vulcanize config gives the no resolver found error?

[kolesnikof]

Same problem. System: MS Windows 7 x64, Node 0.12.4
Path is ok (no spaces). Vulcanize didn't work if "inlineCss" is true.

[addyosmani]

Hey folks,

The two issues I'm seeing here are: 1) Vulcanize isn't working if there's a space in your paths (this may be Gulp specific, rather than an issue with Vulcanize) and 2) it won't correctly vulcanize if inlineCss and/or inlineScripts are used.

Would it be possible for you to try posting about these issues upstream on the relevant issue tracker with as much information as possible so that we can nail down if this is a bug that needs fixing there? We're using Vulcanize through gulp-vulcanize so failing the issue there it'll either be an issue with the plugin or our use of it.

https://github.com/Polymer/vulcanize
https://github.com/sindresorhus/gulp-vulcanize

[devAtPolydeals]

There are issues after u gulp with vulcanize on windows box. Update gulp-vulcanize and change the script to below, this should fix it.

gulp.task('vulcanize', function () {
  var DEST_DIR = 'dist/elements';

  return gulp.src('dist/elements/elements.vulcanized.html')
    .pipe($.vulcanize({
      dest: DEST_DIR,
       abspath: '',
       excludes: [],
       stripExcludes: false
    }))
    .pipe(gulp.dest('dist/elements'))
    .pipe($.size({title: 'vulcanize'}));
});

[githubertus]

@devAtPolydeals
I'm happy to confirm your fix is working.
System: Windows 8.1, NO spaces in path, polymer-starter-kit-1.0.2

Without fix I'm getting:

[08:27:19] Using gulpfile ~\Documents\psk\gulpfile.js
[08:27:19] Starting 'vulcanize'...
{ [Error: no resolver found]
message: 'no resolver found',
fileName: 'C:\Users\githubertus\Documents\psk\dist\elements\elements.vulcanized.html',
showStack: false,
showProperties: true,
plugin: 'gulp-vulcanize',
__safety: { toString: [Function] } }

[egagn]

i googled and found this solution:
http://stackoverflow.com/a/31098879/5066102

it solved my issue with inlineCss.
i can set to true now without error.

just add excludes: ['//fonts.googleapis.com/*'] to the vulcanize option in the gulpfile.

strip: true,
inlineScripts: true,
inlineCss: true,`
excludes: ['//fonts.googleapis.com/*']

[Everlag]

i googled and found this solution:
http://stackoverflow.com/a/31098879/5066102

That solved the issue for me.

[alexpaluzzi]

Confirming that exclude fonts.googleapis.com fixed the problem on my Windows box as well.