Skill Badges

Example of Inline Importing of Elements

<link rel="import" href="./github-wc.html">

This performs a network call for each file imported. To combine network calls into one, run vulcanize on the files.

Example of Vulcanizing a Group of Elements

In this folder, there is another called elements which contains a couple small Polymer components: color-input.html and color-heading.html.

Both components were being imported onto elements.html like so:

<link rel="import" href="color-heading.html">
<link rel="import" href="color-input.html">

To cut down on the number of network requests, I ran vulcanize elements/elements.html -o elements/elements.vulcanized.html (after running npm install -g vulcanize). This created an elements.vulcanize.html file that contained both of the imported elements as well as the entire Polymer library since both elements import it.

Example of Integrating into Build Pipeline.

Using Gulp, I added vulcanize as a task to the gulpfile which created the dist/elements/elements.html file. Then I added gulp to the postinstall script in the package.json file like so: "postinstall": "bower install; gulp; polymer serve;". The gulpfile task looks like this:

            gulp.task('vulcanize', function() {
              return gulp.src('elements2/elements2.html')
                .pipe(vulcanize())
                .pipe(gulp.dest('dist/elements'));
            });
          

To pull the file into this page I use <link rel="import" href="dist/elements/elements.html">