6.2 Code Autoprefixing, Combination, and Minification

Hi and welcome back to Responsive Web Design Revisited. In this lesson, you are going to learn how to optimize your code. Part of responsive web design is creating the best possible experience you can for users on all different types of devices. And that includes devices that might not have the biggest internet pipeline. So the faster you can make things load and the faster you can make the execute, the better experience you're gonna generate. Now, we're gonna start by combining and minifying all this different Java scripts that we've been using. We have four that we've been loading in separately into our site and we're gonna combine them all together into one single file that will be loaded with one line of code. And we are gonna do this using reprocess in built functionality that is designed to handle this type of thing. Now we already have our project added to preprocess. Now in order to combine all of these files together. All we have to do is open up our main [SOUND] RWD file. And we just need to add a few lines at the very top of the file. [SOUND] The syntax to use is two forward slashes with an at symbol, prepross-prepend. And then just add in the name of the file that you want to pull in and combine at the start of the file that you are working inside of. So what this will do is first it will grab modernizr.js then it will grab picturefill.js and it will add that card to the bottom of the modernizer. Then it will do the same thing with jQuery adding that on to the end of the card that is already put together. And then finally it will bring in the code that we have written ourselves in our RWD.js file. And while it's going through that process, it's also going to pull out all of this empty space. So all of these empty lines, all of these comments and it's just going to pull everything down to the absolute bare minimum that's needed for everything to function well. All right, so I'll save that file and we will go back to pre-pross. And we will go into our JS folder and click on our RWD.js file. And now all we have to do is just click this Process File button and it will generate this combined and minified file here. So we'll do that, we'll just give it a second to take care of that for us. [BLANK_AUDIO] And it has been compiled successfully. And there is our new combined and minified JavaScript file. And you can see that it has been added into our project folder. Now, we can go into our HTML and instead of loading all of these files individually, we can delete each of these lines. We don't need to load our RWD file in by itself anymore. Now instead of loading all those files in one at a time we can just load in our new combined and minified file. And now everything will still work in exactly the same way but it will just be just a little bit faster. Now we wanna also optimize our CSS files. So there are three things we're gonna go through. We're going to auto prefix the CSS to make sure that we get an up to date list of auto prefixes applied to the CSS. Then we are going to combine all three of our CSS files into one. And that's also why we didn't mind doing our style tile CSS separately because in the end all of the files are gonna be merged together. And then we're going to compress that CSS down, so we're going to run this through a project that will combine all our media queries together. If they are executing at the same width they're gonna combine all of the rules together in the most efficient way possible. And to do this we're actually going to be using Node JS. And its gonna involve a little bit of command line. Now if you've never used command line before don't let that put you off, command line really gives you access to a lot of fantastic tools and once you give in to using it, you'll never wanna go back. And the first step is to head to nodejs.org and just download the program for your operating system. There is a Windows program, a Mac program, and a Linux program. So you just install that like you would any other program on your computer and as part of that install you'll have a package manager installed. It's very similar to what we used to put packages into Sublime. The only difference is that you work with it through command line. We're gonna be installing three node packages. The first one is CSS combine, we'll be using that to combine our three files into one. We'll be using autoprefixer and this refers to the Can I Use website to make sure that the vendor prefixes in your code are all up to date. And we're also going to install CSS Condense which will compress our CSS down to its most efficient form possible. At the process after you have installed Node JS, the process for installing each of these packages is the same. You just type npm space install hyphen g to install the package globally which means you'll be able to use it anywhere and then a space and just the name of the package. Now I'm gonna show you how one of these is installed and then you should be okay to go ahead and install the other two yourself. Each one gives you a line at the top of its page telling you what the command is to install. And just make sure you also include that space hyphen g so you are able to use the package anywhere. So we're gonna install CSS combine. Now if you're on Mac, to install something globally you'll need to type out sudo. Which is super user do before you actually type out the rest of the command so, npn install hyphen g for global css combine and then just hit Enter. And again, if you're on Mac, you will need to put in your password if you're on Windows, you won't. And then just wait for a moment while that grabs the package off the server and installs it on your machine. That install is now finished and you'll now be able to use the CSS combine package anywhere on your computer and I'll show you how. Here we are in the CSS folder for our project. Now if you're on Mac, I recommend an app called Extra Finder. It gives you the option to have a right click menu with a New Terminal Here command and that will allow you to open up a terminal inside any folder. Now, if you're on Windows you can do the same thing without needing to install an extra app. All you have to do is hold down the shift button and then right-click inside your CSS folder. And you should see an option in the contet menu to open up a command prompt in that folder. All right, now we are ready to use the packages that we've installed so by now you should have all three packages that we just talked about installed. If not, go ahead and install those and then come back. And we're gonna begin by using CSS combine to bring all three of our files together into a single file. And the way it works is with the import command so I've set normalize.css to import at the start of this file and I have set our style tile file to import at the end. Now, CSS combine will read these lines and it will be bring all three files in together in the order that we've laid out. Now to make that work I just go to my terminal that I've opened up inside the CSS folder and just type in css combine. And then the name of the style sheet that we want to work off, which is style.css. Then a greater than sign and then the name of the file that we want to have all of these compiled into. So that will take our style.css it will read our import lines and then it will produce style.com.css. So we'll let that run and that has produced this file which is all three of our files combined in together. And following that, now that we have all of our CSS combined into a single file. We want to run Auto Prefixer on that file so that we can make sure that all our vender prefixes are adding correctly. So to do that we type auto prefixer and then we type out the name of the file that we want to have it process, which is the file that we just created. And that has now run through our style.com.css file and added any vendor prefixes that are required. And now, we're gonna take our auto-pre-fixed and combined file and minify it. So to do that we are going to type out cssc which is for our CSS condensed package. We type out the name of the file we want to minify which is style.com.css. And we use the greater than sign and then we type out the name of the file we want to have it output which is style.min.css. Run that. And there's our new style.min.css. Let's take a quick look at that. You can see how everything is being crunched down and utterly compressed. Now before we had a file size that was around about twice the file size of this CSS file. And now we can go ahead and load that CSS file in instead of all of our individual style sheets by just replacing them all and loading in style.min.css. And just like with the JavaScript that will work in exactly the same way, but it will just be that little bit quicker. Now as an alternative to doing each one of those steps one at a time, I'll just delete these, you can actually run all of those commands together. And I'll provide you with a file so you can just copy and paste this command whenever you need to use it. Now that's all three of the things we just did. So we have our combining step and then we use two little ampersands to chain these commands together. And then we have our autoprefixer step followed by our minification step. And that will do the exact same job, but it'll just do all three of those steps at once. And you can see our combined style sheet popped up and then our minified style sheet popped up. So, even though it might seem a little bit daunting to have a look at command line for the first time. You can see who once you get a bit of a handle on it, it gives you a lot of really powerful and really fast ways to do some really awesome things with your sites. And on that note we have your site fully optimized and fully responsive and fully styled. Your complete responsive web design is finished. In the next lesson, we will just have a bit of a recap and a bit of a look at everything that you've achieved. And then I'll give you some tips on where you can go next. I'll see you in the final lesson.