7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Set Up the CSS

In this lesson we’ll get Gulp building the CSS files. We’re going to set up two files for two different purposes, and we’ll then push both files through an optimization pipeline.

2.3 Set Up the CSS

Hey, welcome back to Optimize Your Website with that end and the last lesson we got the basics of a project set up. We got node going, we got gulp going and we got your gulp file setup as well as getting the plugins that you need installed and ready for use. In this lesson, we're going to set up the CSS processing for our side. So I mentioned there's a couple of things we want to achieve with our CSS are on our checklist. We want our CSS to be in line, in our head section, but we want to work on our CSS as an external file. And one of the reasons you want to do this when you're optimizing is we're gonna stick with the 50 kilobyte maximum limit for our total CSS. So when you can see your files separately, it helps you to keep an eye on roughly what size they are. We're also going to be compressing our CCS files, we're going to by minifying them to strip all the white space out. So your separate files are going to be a little bit bigger in file size before they're meta filed like that. So you have a little bit of wiggle room compared to what you see as your file size read out. Right now what we're gonna do is set up a new folder. And we're gonna name it src for source because we're gonna be rushing our code into files that we'd put inside this folder and then we're gonna take a look at that code and basically smash it together into our actual live site. So all about source code or source files that we're working on, will be inside this folder. In here we're gonna work on some CSS, and we're also gonna work on some HTML so we'll separate those, by creating a new folder for CSS. And now in here, we're gonna create two files. We're gonna create one, called style.css. And this is going to contain all of our regular css for starring the page. And we're also going to create another one named no script.css. And we're going to use this one later, to help provide our JavaScript fall backs. All right. So now we've got our file set up and our folders all in the right place. We're going to go back to our code editor. So now we can see, we've got our source folder here and our CSS files inside. So now we need to set up a couple of tasks to handle these CSS files. And once again, I'm going to copy and paste the code that we need, and just talk you through it, so you're not spending too long watching me type. And this first bar of codes here is gonna process our main star shade here. So I'll take you through what we're doing here. First we've set up out gulp task and we've named it CSS. So if you wanted to just run this task by itself you'll type gulp CSS in the terminal points to your folder. And then this line here is telling gulp what source file it should be processing. And we're telling it to grab the filename style.css that's in the src/css folder, so that's this one. Then we're running the concat plugin on it, and what that is gonna allow us to do is when we're coding up our style sheet we can use at import to reference another style sheet and then go we'll fetch all of the CSS from that other style sheet. And it will transplant that content directly into our main style sheet. Then we're running the code through auto-prefixes so if there are any browser prefixes that are needed on the code that will be automatically included. Then we're running it through clean CSS and that is gonna suck out all the white space and compress our CSS file down to the smallest size possible. Then we're taking the code that we have so far, and by default it would just be pushed out with the same file name as we specified up here would just be pushed out style.css. But we wanna give it a different name, we wanna call it style.min.css. To let us know that this is the new minifide version of our file. And then we're telling gulp the destination that we want to right, and a new optimized style into, and that is the source folder, and the CSS sub folder, so we're going to be putting it back in to this folder here. Right now we'll save that and then let's test out this task. All right, so now if we type in, gulp css, it´s gonna process that file. And there you go, there´s a new style.min.css file. Now we need to do the same thing for our noscript file. So we're gonna add in another task. And this one is gonna be called noscript_css. It's almost the same as our first CSS task. So we're grabbing our source file, which in this case, is the noscript.css file. We're adding any vendor prefixes that are needed. We are minifying it. Renaming it to noscript.min.css and then setting a destination for the new file to our css source file. The only thing that we're not doing here is using the concat plugin because we're only going to be putting some simple code into our no script file so there's not going to be anything for it to concatenate. All right. Now let's try that task as well. So this time, we'll type Gulp in no script_css, and there's our new minified no script file. Now there's one more thing that we want to do as part of getting our CSS set up, and that is we don't want to have to be manually running those tasks every time we change our CSS file. We want Gulp to do that for us automatically. So inside our default task, we're gonna set up some file watches. We're gonna tell Gulp to watch our starter CSS file and note script.css file and whenever the change we want gulp to run these task for us. So we're gonna make that happen by adding these two lines of code. Just turn that a little. So we're using gulp watch and this is telling gulp just to watch our files. Here we're telling it which file to watch, so we're telling it to watch sstyle.css file. And then whenever it changes we're telling it to run the css task. So that's just gonna happen automatically for us. And then it's the same thing here we're telling gulp to watch our noscript.css file and to run the noscript.css task, whenever it changes. So save that and now, let's run a gulp default task and we'll just test what we've set up. So just gonna run gulp and let it spin up our server, and now we'll just do a small test on one of our CSS files. So, we're just going to type in just some test code, so let's just add a test, and just add background: black. Now, we're going to save that. Now, right now, our start.min.css file is empty, but, after we save it, that should tell gGulp to run the correct task, and we should see this code show up in this file, but with all the white space stripped down, so let's give that a try. So, we'll save it, and then you can actually see in the terminal here that it has started the CSS task, and it finished the CSS task. So, if we look in our style.min.css file, here we go, there's our code from our source file, all minified just the way we set it up to be. And of course, the same thing will happen if you're working on your noscipt file. It will be processed, and it will be written into your noscript.min.css file. So now that's everything we need to get our CSS build process up and running and next thing for us to do is get html bill process up and running. We've got our CSS now in these two files, but what we need to do is push into the head section of our html file. So we are gonna get things set up in a way that's gonna let that happen. And we are also gonna set up another task in that file that's going to detect if we make any changes to out HTML, and rebuild our html page but will also detect if we change our CSS so that it can get rewritten into the HTML file. And then,we're going to set it up so that when any of those things happen, our live preview of our site is automatically refreshed. So, we'll be completing those steps in the next lesson. I'll see you then.

Back to the top