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.2 Project Setup

In this project we’ll be leveraging Gulp, by way of Node and NPM, to help us with our site optimization processes. In this lesson we’ll get our project structure set up and ready, and install some of the Gulp plugins we’ll be using along the way.

Related Links

2.2 Project Setup

Hey, welcome back to optimize your website without AMP. In this lesson, we're going to get the initial steps for your project setup going. And this is going to get us all up and running so that we can minify and combine our JavaScript file so that we can conveniently work with our CSS in external files, but still have it be run in line, inside the HTML files. There´s a couple different things that we're gonna be doing, and we're gonna facilitate all this by using node.js. And this means, we are gonna be working with command line a little bit. So if you´re brand new to command line, I´m gonna put some links below this video that will get you through some of the very basics of working with command line, or otherwise you can follow along with what I do in this video. I'm gonna go through everything step by step, so you should be fine, even if you're pretty new to command line. The first thing you're gonna need is Node JS. So you can head to nodejs.org and then go to the downloads page, and if you are on Windows or MAC, the easiest thing to do is just going to be to download one of the installers. And if you're on Linux, you'll probably find that node.js is just in your repos so you can just download directly out of there. There are a few pre-requisites that you might need to install as part of getting node up and running, and you can read about all of those in the articles that are linked to below this video. That should guide you through all of that. Right now, you should also have access to a set of source files, along with your access to this course. And inside those source files, it's going to be a zip file. If you unzip that and then look inside, you'll see a folder named Starter Files. And then inside that, you'll see another zip named Project Starter. I want you to grab that zip and then extract it into a folder that's gonna hold the site that we're gonna be building here. And once you do that, you should see these files here, so we've got a folder with some font files. We have a folder with some images in it. And then we've also got a couple of text files here. We've got a package.json file which I've put together for you so that you don't have to manually install a bunch of different packages. We'll go through how to use that in a second. And then we also have a gulpfile, and this is what we're gonna be using to control our build process. So to control all of that CSS and JavaScript management that I was talking about before. Now inside this folder, you're gonna need to open up a terminal or a command prompt that's pointed at this location. Now once again, if you're not sure how to do that, there are instructions on how to do that in the command line tutorials that are linked to below this video. Now the first thing that we're going to need to do is initialize this as being a project that's going to work with node. And we also have some packages that we want to get automatically installed. We're gonna get packages like gulp installed. gulp is what's going to handle our build process for us. Some plugins for gulp that allow us to do things like minifying JavaScript for example, and a few other bits and pieces. All with different purposes, and you'll see each of those as we continue to go through the setup. So once you have a terminal pointed at this folder, all you need to do is type npm install. And that's gonna reference that package.json file and it's going to download a bunch of different packages into the node modules folder that you just saw appear there. And then they'll all be available for us to use in our project. Now this might take a little while, so I'm just gonna skip forward, and there we go. So now that it has fetched a whole bunch of stuff here, you can see all these different packages that are now available for us and ready to work with. So now we are ready to go ahead and open up a code editor and start working with our gulp file and setting up our build process using all these modules that we'd just installed. All right, so here we are in our code editor. And what we're going to do is edit our gulp file. Now, this gulp file is what's going to allow us to do all of this code manipulation that I talked about, that helps us with our optimization. Now these lines that are already here, these are just telling the system that these are the different plugins and what have you that we wanna load in. So we've got gulp which is the main JavaScript task manager that we're using, we've got browser-sync. We're gonna use this to set up a live service so that we can have a preview of our site that's run over an HTTP protocol, meaning that everything is gonna work properly, and also said that we get live reload. We have a plugin that is going to allow us to combine some separate CSS files together, that's concat cns. We've got autoprefixer, and that's gonna make sure that the right order of prefixes are added into our code as necessary. We have cleanCSS, and that's gonna allow us to minify our CSS. So pull all the white space out. So we crunch our file size down as small as possible. We have gulp-uglify which is going to do the same thing to our JavaScript. It's going to crunch all our JavaScript down and make sure there's no white space in it. We have the concat plug in and that's gonna allow us to combine multiple JavaScript files into one. We have gulp pug. A pug is a templating language that produces HTML, and we're going to use this to import our CSS into the head section of our HTML. And then we just have the gulp-rename plugin, which is going to allow us to control the names of the files that are produced by gulp for us. All right, so the first thing that we're going to do is to set up a gulp task. So when you create a gulp file, you define your own series of tasks. And they become little commands that you can run to do whatever type of operations that you wanna do on your files. So we're gonna make one to start with that's just going to run browser sync. So it's gonna give us that local server and it's gonna give us live reload. Now a lot of this code, I'm just gonna copy and paste it in and then explain it to you because otherwise, you'd be sitting there for half an hour watching me type, and that's not gonna be very much fun. So let me just grab the code for our browserSync task and I'm just gonna paste it in. All right now, what we're doing here is, we're setting up a new gulp task, and we're naming it browser-sync. And then we have this function here that is controlling what this task is going to be doing. So we have browser sync, which is this variable here. So by using this variable, we're telling the system that we wanted to use the browser sync plugin that we installed just a moment ago. Then we're telling it we want to initialize it. We are letting the server know where the base directory is that it should look for our source file. We're gonna have an index.htm file and what have you in the base of our directory here. And we're also just setting the option open to false. And by default, browser sync will actually automatically open your site in your default browser when you start it. But that can actually get a little frustrating, because often you want to stop and restart your browser sync server for multiple different reasons, and you don't want to have it opening up a brand new window every time you do that. So we're setting open to false here for that reason. So we're gonna say that and we're gonna go back to our terminal that's pointed to our project folder. And now if we run gulp browser sync. That's gonna run the task that we just set up. And so you can see here, it's showing us that at this address we'll be able to go and visit the site that we're previewing. And we don't have any files in there yet to look at, but I just wanted to show you how that works. And now to stop that server, you can just press Ctrl+C or Cmd+C. And we are gonna be setting up a whole bunch of tasks. And what we're gonna do next is set up a default task so that when we just use the command gulp by itself with nothing afterwards, it's gonna trigger all of the different tasks that we're about to set up. So for that we're going to need this code. So instead of specifying a task name of our own like browser-sync, we're just gonna enter default here. Now here we have an array and in this array, we're letting the system know that we also want to run the browser-sync task up here. So now, if we go back to our terminal again, if we just type in gulp, now, that still spun up that same localhost server. Now, as I mentioned, at the moment, we don't have anything to look at in our browser sync preview, because we haven't added any of our site files, and that's what we're going to start working through in the next lesson. All the fundamentals are there, we've got node up and running, we've got gulp up and running, and we've got our essential configuration files there. And then the next thing to do, is to get our gulp file set up to process our CSS. And what we're gonna do, is set up two different CSS files. We're gonna combine the CSS files, we're gonna optimize them, and we're gonna make them ready for insertion into our HTML. So we'll step through how to do all of that in the next lesson. I'll see you there.

Back to the top