Gulp Workflow: Polymer Specific Tasks

• March 28 2016
• 2 min. read

Vulcanize and Crisper are Polymer specific tasks that deal with the way web component works (and make puns on the name Polymer too :) )

Vulcanize will combine all elements in elements.html and produce a single file. This is the same as a concatenate task except that it understands Polymer way of doing things

We run crisper in the vulcanized output to extract scripts so we comply with the Content Security Policy specification that bans all inline scripts as a way to make sure we’re not getting malicious code on our pages. See the inline scripts section of this HTML5 Rocks article for this and other restrictions imposed by CSP.

Install the plugins, as normal

npm install --save-dev gulp-crisper gulp-vulcanize

The task below integrates both plugins:

gulp.task('polymerBuild', function () {
  return gulp.src('app/elements/elements.html')
    .pipe($.vulcanize({
      stripComments: false,
      inlineCss: true,
      inlineScripts: true
    }))

    .pipe($.crisper({
      scriptInHead: false, // true is default 
      onlySplit: false
    }))
    .pipe(gulp.dest('dist/elements'))
    .pipe($.size({title: 'vulcanize'}));
});

Edit on Github