gulp-vulcanize doesnt seem to make use of abspath option

[gaarf]

gulp-vulcanize does not seem to pick up the abspath option. It works fine when using vulcanize directly on command line.

gulp.task('vulcanize', ['html:elements'], function (done) {

  /**
   * gulp-vulcanize does not work as expected!
   */

  // return gulp.src('./dist/assets/elements/x-app/all-imports.html')
  //   .pipe(plug.vulcanize({
  //     abspath: __dirname
  //   }))
  //   .pipe(plug.concat('x-app.vulcanized.html'))
  //   .pipe(gulp.dest('./dist/assets/bundle'));


  /**
   * same thing using command-line does work
   */

  var output = [],
      child = spawn(
        './node_modules/gulp-vulcanize/node_modules/.bin/vulcanize',
        [ '--abspath', '.', 'dist/assets/elements/x-app/all-imports.html' ],
        { cwd: __dirname }
      );

  child.stdout.on('data', function (b) {
    output.push(b);
  });

  child.on('close', function() {
    var filename = __dirname + '/dist/assets/bundle/x-app.vulcanized.html';
    mkdirp(path.dirname(filename), function() {
      fs.writeFile(filename, Buffer.concat(output), done);
    });
  });

});

all-imports.html contains both relative and absolute imports. Eg:

<link rel="import" href="./x-app.html">
<link rel="import" href="/bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../lorem-ipsum/lorem-ipsum.html">

[seahrh]

I have a similar issue on Win7; abspath is concatenated twice. gulp-vulcanize throws the following error:

errno: 34
code: ENOENT
path: C:\path\to\dist\dir\path\to\dist\dir\index.html

I am vulcanizing in my dist directory (suggested in #51)

gulp.task('vulcanize', function() {

    var DEST_DIR = bases.dist + 'WEB-INF/pages';

    return gulp.src('*.html', {
        cwd : DEST_DIR
    }).pipe($.vulcanize({
        abspath : bases.dist,
        inlineScripts : false,
        // inline css does not work if paper-input is imported
        inlineCss : false,
        stripComments : true
    })).on('error', error).pipe($.rename({
        extname : '.vul.html'
    })).pipe(gulp.dest(DEST_DIR));

});

On vulcanize 1.9.1, gulp-vulcanize 6.0.1, Polymer 1.0.3.

[dfreedm]

Should be working with vulcanize 1.9.3. Please run npm update

[gaarf]

@azakus thanks, did the update, but didn't see any change at first. I was seeing same issue as @seahrh, double abspath.

Finally got it to work by changing gulp.src('./dist/assets/elements/x-app/all-imports.html') to gulp.src('/dist/assets/elements/x-app/all-imports.html') - just removing that . did the trick.

[seahrh]

Updated to vulcanize 1.9.3 but I am still seeing the same issue (double abspath). Having a leading / in gulp.src did not work for me.

[csmith932]

This issue is unresolved. Some clues for troubleshooting:

1. The relationship to gulp-vulcanize derives from the fact that gulp-vulcanize resolves file.path to the absolute file path.
2. If you run vulcanize with --inline-css, an absolute file path, and no/empty --abspath then it fails due to "no resolver found".
3. If you run vulcanize with an absolute file path and anything nontrivial for --abspath (with or without --inline-css) then it fails when trying to open an invalid file path composed of the concatenation of the --abspath value and the absolute input file path.
4. The "no resolver found" error appears to be associated with CSS files referencing external URLs of the form "//domain.com/etc" without a leading http or https. These should be handled in the solution to [polyserve] Regression: babel compilation breaks CE polyfill in IE11 and Safari 9 #182 but the constants.EXTERNAL_URL isn't picking up on it. "EXTERNAL_URL: /^(?:https?:)?//|(?://)/" is a quickie workaround for that specific URL pattern but it isn't a permanent solution and only addresses part of the problem.

[dfreedm]

Yeah I think I understand the issue now.

There is no way to specify the path when using abspath in gulp because it read the file and forward it with its own metadata. One possible fix is to provide the input file path as an option, and ignore the path from gulp. In fact, this would probably be better anyway as it would allow for using the file buffer from gulp directly.

I'm confused by (4), this is explicitly tested for with Polymer/polymer-bundler@47f684b

[seahrh]

Yes please reopen this issue. I also have the same inline-css "no resolver found" problem as what @csmith932 described in (2).

[xmakro]

Same problem here on Windows x64

[dfreedm]

I've added a new option, inputUrl, that will override the file path gulp gives to vulcanize. This will fix instances on windows for single input files to be mapped to a URL for abspath usage correctly.

This option is added to 1.10.0, which I have just published.

An example is here: Polymer/polymer-bundler@11f9af7

[seahrh]

@azakus, only one file is vulcanized in your example. Is there a way I could vulcanize multiple files in my gulp task?

return gulp.src(['*.html', '!*' + VULCANIZED_EXT], { // many files
        cwd : 'src/main/webapp/WEB-INF/pages'
    }).pipe($.vulcanize({
        abspath : 'src/main/webapp',
        inputUrl : '/WEB-INF/pages/index.html', // one file
        inlineScripts : false,
        inlineCss : false,
        stripComments : true
    })).on('error', error).pipe($.rename({
        extname : VULCANIZED_EXT
    })).pipe(gulp.dest('src/main/webapp/WEB-INF/pages'));

[jimmidyson]

I still cannot get this to work with gulp-vulcanize properly - polymer is included twice. Output during build:

Ignoring duplicate element definition: custom-style
Ignoring duplicate element definition: dom-template
Ignoring duplicate element definition: dom-repeat
Ignoring duplicate element definition: array-selector
Ignoring duplicate element definition: dom-if
Ignoring duplicate element definition: dom-bind

And in browser when loading vulcanized elements:

Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.

If I try the abspath & inputUrl config like:

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

    return gulp.src('dist/elements/elements.vulcanized.html')
      .pipe($.vulcanize({
        abspath: path.resolve('dist'),
        inputUrl: '/elements/elements.vulcanized.html',
        excludes: [
        ],
        stripExcludes: false,
        inlineScripts: false,
        inlineCss: false,
        implicitStrip: true,
        stripComments: true
      })) 
      .pipe($.crisper())
      .pipe(gulp.dest(DEST_DIR))
      .pipe($.size({title: 'vulcanize'}));
  });

The vulcanize task doesn't run, gulp just exits with no error.

Running vulcanize -p dist /elements/elements.vulcanized.html creates the correct content.