 Hey there, Polycasters. Rob here. Welcome back to the show. So a lot of people recently have been asking me if I'm starting a new project. Should I be using Polymer Starter Kit, or should I use Polymer CLI? Now to help with this problem, we've recently taken Polymer Starter Kit and migrated it over to being a Polymer CLI compliant template. So now we can sort of definitively say you're starting a new project. You should absolutely be using Polymer CLI. Follow me over here to my laptop, and let me show you how this works. So I'm going to start off by running npm install dash g Polymer CLI. This will pull down the latest version of Polymer CLI, which includes our new templates. And once you've installed that, you can run Polymer init after you've created a new project directory, of course. And you'll see that you've got a few options here. Element, application, shop, Starter Kit. And we'll talk about this last one, custom build in just a second. But the one we want right now is Starter Kit. So you go, you hit Enter on that. It's going to run npm install. It's going to run bower install. So it'll take a minute or two to pull everything down. I've already got it set up on my machine over here. So let's just go ahead and open this Starter Kit app, take a look around the code. What I've got here is pretty straightforward. I've got an index HTML file inside of here. I've got all the appropriate meta tags so I can get the right app icons and things like that on different browsers. I've also got a link to a web app manifest. I've got my polyfills being lazy loaded. I've already got some critical CSS in here. And then we can go all the way down. You can see that I've got a MyApp element. And then looking in the source for MyApp, you can see that we're using the latest app layout elements. And we're also, if you scroll down a bit, you can see that we're also using the purple loading pattern to lazy load in our dependencies. You can see that down here in this page change handler. Now a lot of this is stuff that we covered in a previous episode on Polymer CLI. So I will link to that episode over here. So you can go check that out. You can see how this project is built. Because basically what we did was we took the original app drawer template that shipped with Polymer CLI. And we just migrated it over to being our new starter kit. We tweaked it in a few places to make it a little bit nicer. But basically, we thought that was a really good place for new users to start hacking on Polymer. So we've just rebranded it. And that's what this is. If we go over to our terminal, we want to test this thing out. We can just run Polymer serve. That will boot up our local server. I'm going to fire up localhost8080. And you can see this is a pretty great little starter kit. It's using app routes. You can see as I'm clicking on these different menu items, my URL is changing up here. And if we want to build this project, so we want to have it vulcanize and get sharded into different bundles, we can just run Polymer build. And that's going to go out. It's going to generate two versions of our project. It's going to generate a built version or bundled version. And it's going to generate an unbundled version. So the bundled version is for people who need vulcanize, they need web component shards, which is most folks at the moment. The unbundled version is for those folks who are living a little bit more on the bleeding edge and can use HTTP to server push, to push down all of their resources. So that one doesn't do any sort of concatenation or vulcanization. It just keeps all of the source files separate. But I'm going to test out the bundled version just to verify everything worked after my build. So I do Polymer serve build slash bundled. And again, I can go fire up localhost 8080. I can see we get the same site. Got no console errors or anything like that. Everything looks good. But now we're working on the vulcanized version and the one that has been sharded using web component shards. So this is really great. But I know that a lot of people really liked Polymer starter kit because it came with this really powerful gulp file. And if you look at our source code over here, you can see that there's a lot of things included. But what is not included is a gulp file. Instead, Polymer starter kit just relies on the default build that the Polymer CLI does for you. And that's a pretty compelling option there, right? It still does vulcanization. And it'll actually generate your service worker for you. It does web component shards based on your Polymer JSON file. So there's a lot of really cool things you get from that default build. But I recognize that some teams have additional things that they want to add to their process. And so to support those folks, we've taken Polymer starter kit. And we've also created an additional generator, which we just call the custom build template. So to install this project over in your terminal, you would run here. I'm actually going to go to the GitHub page and grab the name here. So you can find this on GitHub at Generator Polymer and NIT custom build. The name is a little verbose. But the magic part here is any project that starts with Generator Polymer and NIT can actually be plugged into the Polymer CLI. So what we're going to do is we'll run npm install dash g generator Polymer and NIT custom build. That will go. It'll fetch all the right resources. And then the cool thing about that is once that is installed on our system, we can just run Polymer and NIT. And now you can see we have this extra option down here for custom build. So I've already got this set up on my machine. Let me go and check out that custom build app. So go to my desktop. I'll cd into custom app. Let's take a look at this. Now this project is set up pretty much identical to Polymer Shutterkit. It's literally based on that Polymer Shutterkit that we were just looking at, with the exception that it has this really cool gulp file that it ships with. So over here, we've got this gulp file js. I'll boost this up a little bit for you so you can kind of see what's going on. And the main magic that is going on in this gulp file is rather than just rely on vanilla gulp by itself, we're actually using the library that powers Polymer CLI's build to help us construct our pipeline here. So that library, if we go over to GitHub, I can show you the page for it. It's called Polymer Build. And this is just the underlying node module that powers Polymer CLI. And the cool thing about this is we can run our files through this. We can have it do all of the things it normally does, generate our service worker and stuff like that. But it also gives us hooks where we can step in and we can say, hey, I want to do some additional processing of the source files. So over in the gulp file here, you can see that there's a little bit of configuration data up here at the top. So this lets you set the name of the output directory and things like that, the name of your service worker file, et cetera. I think you can see that we've also gone ahead and we've sort of predefined a few useful gulp tasks for you. So we've got a clean task here, task for minifying images. These all live over in this gulp task directory. If you want to create additional gulp tasks, you want to have sort of like a modular gulp file where things are separated out like that, you can add your own task to this gulp task directory. That's really what it's there for. And then we've got these two functions here, source and dependencies. The source function is where we process all of your actual source files. What the Polymer Build Library does is it looks at all of your HTML imports and it extracts the inline CSS and JavaScript and the HTML. And it turns it into just one big file stream that we can then just filter and pass to different gulp tasks. So you can see here we're calling split resources. This project object here is part of the Polymer Build Library. So we're splitting our resources. We're turning it into that one big stream. And then we can just use gulp if to filter by file type and then pass that resource to a particular task. So here we're saying, hey, filter by all the different images. When you find an image, pass it through this minify task. We also have this dependencies task down here. This is where we do basically the exact same thing, but we do it for your dependencies instead of your source files. So if you want to do something special to your Bower components or something like that, that's where you would do that work. So I think it would be a cool example is for me to just show you how you can add your own gulp task to this file. So right now, I'll just run gulp to generate a build. And we can see what it outputs. You can see that it mentioned that it minified our images because we had that custom task in there. And going back to our editor, I'll go look at the build file. I'll look at the bundled version. And I'm going to open the MyApp file. So this is sort of like the place where everything is being vulcanized into. You'll see that there's a lot of stuff kind of mushed into this file. So you've got all the source code for Polymer being mushed in here. And if I go down to the bottom, you can see this is the source code for my actual MyApp element. And right now, none of this JavaScript has been minified in any way whatsoever. So let's change that. Let's run this code through a minifier. To do that, I'm going to go to my console. I'm going to do npm install, save dev. And we're going to throw in gulp-uglify. So wait a sec for that to download off of the interwebs. OK. So now we've got uglify in our project. And I'm going to go over to the gulp file here. I'm going to go over to where my gulp tasks currently are. And I will just drop in a const for uglify. And now in this sources section, I'm going to drop in a little one-liner here, where I pipe any of my files through gulp-if. If those files look like JavaScript files, let's run them through uglify, OK? So remember, we're in the sources function here. So this is just going to be applied to our actual source files, not to our dependencies. So let's see what the output of that looks like. We'll run it through gulp. We're going to go back. We will look at our build. Look at the bundled version. We look at my app. And now you can see that down here at the bottom, you can see that my code was minified. So the definition for the my app element, that got mushed together. That looks good. But if we go back to the top, you can see that all of this Polymer source code, this remains unminified, right? It's still all huge and gigantic here. So I can do basically the same thing that I did there. I can apply that same task to my dependencies. So I could run my dependencies through uglify as well, if I would like. I will run gulp again. This time it'll take a little bit longer, because we're processing a lot more code through uglify. And when I go back, now I look at my build. And now you can see that all of that dependency code has been minified as well. If we want, the last thing we can do is we can just run polymer-serve-build-slash-bundled. And then we will probably put my phone on airplane mode. By the way, that was my mom calling about my wedding. So we'll go back to our terminal. We'll run polymer-serve-build-slash-bundled. Go over to localhost 8080. And now we can see we are running our built version with minified JavaScript. And we still have everything that we had from StarterKit. We still got that cool router and the app layout elements. But we now have the option of kind of hooking in where we want to and adding our own gulp task, which is pretty great. That about covers it for today. In the next episode, I actually want to talk about how you can build your own generator, how you can actually plug in to Polymer CLI and create your own scaffold, just like we did with this custom build here. But if you have any questions on this episode, please leave them for me down below in the comments. Or as always, you can hit me up on a social network of your choosing, hashtag ask polymer. As always, thank you so much for watching. And I'll see you next time.