spock

Process into a single file with this gulp plugin.

Spock

A gulp task to concatenate a set of Web Components into one file. A preprocessor for <link rel="import">.

Named for the Vulcanization process that turns polymers into more durable materials.

spock is available on npm.

npm install --save-dev spock
  • verbose
    • Enable more verbose logging
  • outputDir
    • Required for correctly setting links (for now)

Gulp task:

gulp.task('build-html', function () {
  gulp.src('./*.html').pipe(spock({
    verbose: true,
    outputDir: './build'
  })).pipe(gulp.dest('./build'));
});

Say we have three html files: index.html, x-app.html, and x-dep.html.

index.html:

<!DOCTYPE html>
<link rel="import" href="x-app.html">
<x-app></x-app>

x-app.html:

<link rel="import" href="path/to/x-dep.html">
<polymer-element name="x-app">
  <template>
    <x-dep></x-dep>
  </template>
  <script>Polymer('x-app')</script> 
</polymer-element>

x-dep.html:

<polymer-element name="x-dep">
  <template>
    <img src="x-dep-icon.jpg">
  </template>
  <script>
    Polymer('x-dep');
  </script> 
</polymer-element>

Running spock on index.html will result in an output file that appears as so:

<!DOCTYPE html>
<polymer-element name="x-dep" assetpath="path/to/">
  <template>
    <img src="path/to/x-dep-icon.jpg">
  </template>
  <script>
    Polymer('x-dep');
  </script> 
</polymer-element>
<polymer-element name="x-app" assetpath="">
  <template>
    <x-dep></x-dep>
  </template>
  <script>
    Polymer('x-app');
  </script> 
</polymer-element>
<x-app></x-app>