Uglify/minify Polymer web components using gulp

Question

I am trying to minify my web components using gulp's uglify plugin but it fails because it does not recognize the custom html tags.

Are there any gulp plugins that can minify html containing custom tags?

Answer 1

Try out gulp-htmlmin.

I use it to minify my elements.html file after vulcanising, but I suppose it should work on non vulcanised elements just as well. Here's how I call the plugin inside my gulpfile:

.pipe(htmlmin({
    removeEmptyAttributes: true,
    customAttrAssign: [{"source":"\\$="}],
    customAttrSurround: [
        [ {"source": "\\({\\{"}, {"source": "\\}\\}"} ],
        [ {"source": "\\[\\["}, {"source": "\\]\\]"}  ]
    ],
    collapseWhitespace: true,
    // always leave one space
    // because http://perfectionkills.com/experimenting-with-html-minifier/#collapse_whitespace
    conservativeCollapse: true,
    minifyJS: true,
    minifyCSS: true,
    removeComments: true,
    removeCommentsFromCDATA: true,
    removeCDATASectionsFromCDATA: true
}))

Answer 2

To do this is quite the challenge. You use the crisper plugin to factor out the script into it's own file. You can then minify the script source. Afterwards use vulcanize to inline your script back into the HTML.