Thursday, October 20, 2016 | 5:47 AM
This is an adjunct article to a talk given at the Polymer Summit London in October 2016. It describes how to add Closure Compiler to the build steps of a Polymer project.
Polymer, on the other hand, is a library that helps you build modern HTML web experiences with Web Components — specifically, reusable custom elements. There’s also a vast library of elements available already 🎉
Closure Compiler and Polymer are great together. You can write Polymer that is compiled, giving you almost immediate compile-time feedback—are your types correct? — and reducing your code size. You’ll also be able to use use all that modern JS hotness 🔥, regardless of which browser you’re targeting.
The Final Product
Your First BuildLet’s assume that you have no build steps. None! Well, maybe you use vulcanize, to bring together your custom elements. Let’s assume you have an index file like this, containing your elements-
<link href="elements/my-element.html" rel="import"> <link href="elements/my-other-element.html" rel="import">
npm install --save-dev gulp gulp-vulcanize gulp-crisper google-closure-compiler-js
#1: Merge and split your codeLet’s create or update your Gulp configuration file to merge together your elements (it’s called gulpfile.js). This vulcanizes your code, bringing it all together: it then uses crisper to split just the HTML and JS apart.
Note that we don’t include the Polymer source code itself — it’s explicitly excluded. This is because Polymer, at least in the 1.x branch, does not compile well with Closure Compiler. You shouldn’t worry though — the point here is to typecheck your code, not Polymer itself.
#2: Compile the JSNow, we just need one more step to compile your elements. At the bottom of your Gulp configuration file, add this compile step. This depends on your previous merge step, and produces a minified output file.
It has a few nuances. We need to load the Polymer externs manually, as Closure Compiler does not include them by default. You’ll also need to set polymerPass to true, and provide some sensible defaults.
Now, run gulp compile in a terminal. If your Polymer code is perfect — don’t worry, no-one’s is to begin with — you won’t see any warnings.
#3 (Optional): Additional readingIf you’d like to speed up your builds, there’s also a Java version of Closure Compiler. And if you’d like to decrease your code size and increase performance, Closure Compiler also has an ADVANCED mode. However, most Polymer elements won’t compile ⚠️ without changes. To find out more, read Using Polymer with Closure Compiler.
<head> <!-- Order is important! --> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="dest/elements.html"> <script src="dest/elements.min.js"></script> </head>
Rather than four dependencies, you could also add an extra Gulp task which merges the JS or HTML together (especially if you don’t want to ship your bower_components directory). Don’t try to compile again at this point — just concatenating the files together works fine.
Congratulations!You’ve compiled your elements, and gained an awesome 👑 static compile step. Go reward yourself with a donut! 🍩