1.3 The Gulp Setup

Hello and welcome back to this course. In this lesson, you're going to learn how to set up Gulp, but also what technologies are behind it. So in order to understand Gulp, you first need to understand Node.js and npm. Node.js is basically a server-side platform built on Google Chrome's JavaScript engine. It's open source, and it's used to create server-side and networking applications. Now for a web developer, Node.js is also important because it provides an extensive library of open source JavaScript modules that really simplify the development of web applications. And there are a lot of modules, about half a million in September 2017. This library is accessible via npm, which stands for Node package manager. It's basically an application that allows you to download the modules I mentioned earlier. If you go to npmjs.com, you can search for a particular module and find information about it, including how to install it. All right, enough with the theory, let's do something practical. And to get the ball rolling, we're gonna install Node.js. That's done very simply, just go to the website, nodejs.org. And you scroll down to the download section and you download the latest version for your operating system. This is probably detected automatically, but if for some reason you're not seeing your operating system here, just go to Other Downloads and download the correct version. Now, this is the current version, which probably does have the latest features but it's not exactly stable. So, you'll probably be better off downloading this one. So again, depending on your operating system, this might be a dmg file or an executable, go ahead, download it and then install it. Now along with Node.js, npm, the Node package manager, is installed automatically, so you don't have to do anything about that. Once you installed Node, you will need to check if it was installed correctly, and you do that by using the command line. Now depending on your operating system, you can access it in different ways. On Mac OS, you can use the built-in terminal app or a third party app such as iTerm. On Windows, I believe it's called command prompt. And Linux, I'm not sure what it's called, but there definitely is an app like that over there as well. So, in Mac OS here, to check if you installed it correctly, you would say node -v to check the version. And right now I have version 6.11.3. And also, npm -v gives me version 5.4.2. Now here's the tricky bit, as I was saying, npm comes bundled with Node. So when you install Node, you automatically install npm. But sometimes it happens that the version of npm that's bundled with Node isn't the latest one, so you need to update that separately. To do that, you'll need to say npm install npm@latest -g. That's a flag for global. It means it's gonna install npm globally on your system. Now you would enter that command. And if it gives you an error, you need to run it as administrator by putting pseudo in front of it. That's gonna ask you for your password, your computer password of course, you take that in, hit Enter and it should update successfully. I'm not gonna do that here, I do have the latest versions installed. But once you do, you're basically ready to go. You have Node installed, you have NPM, so you can start using any of the modules inside the Node.js library. And I have a project set up here, so I'm gonna navigate to my project source. By the way, if you're using Visual Studio Code, then you also have a built-in terminal that you can access. And that's gonna put you right in your project folder, so you don't have to navigate to it. But if you are using a separate application like I am, you need to navigate it by using cd. cd stands for change directory. And it's basically a way to just move up and down the file structure on your hard drive. So, right now I'm in my user folder, so I'm gonna navigate to my Tuts+ folder, to my course, and then to my Air folder, which contains the files that we're gonna work on today. So, I'm gonna hit Enter. Now if I do the ls command, this lists my directory contents. And as you can see, it just lists this src folder. This is the folder that we'll be working on. And it contains typical content to a web project. We have an index.html. We've got a little bit of content. We have some Sass files. We have some JavaScript files. And also some images. And our goal is to create a Gulp workflow that's gonna allow as to do a bunch of different things to these files. Compile Sass, modify JavaScript, concatenate JavaScript, optimize images, compress them. Also do browser reloading, so it's gonna be really, really cool. Now before we get started, we need to talk about something called a package.json file. A package.json file is basically a configuration file for your project. It tells your project what Node modules have to be installed, right? And the easiest way to get started with this file is just say npm init. All right, so this launches a program that will help us create the package.json file. All right, so it asks us the package name. Is air okay? Sure, we're gonna hit Enter. The version, we'll keep that at 1.0. description, entry point, we can leave this index.js. test command, we can leave this blank. If we're linking to a Git repository, we can specify that here, but in our case, it's not necessary. You can specify keywords if you want, not necessary. Here author, let's just put my name in here. license, you can add whatever license information you want. Okay, and at the end it gives me a preview of that file, here it is right here. And if that's okay, just hit Enter. And now we have a package.json file created based on what we specified in that program we just ran. Next, probably the most important file in our project is the Gulp file. So I'm gonna create a new file here called gulpfile.js. Now in here, we're gonna write every task in our Gulp workflow. We're gonna load plugins. We're gonna basically make Gulp do whatever we need it to do. We're gonna touch on this in the next lesson, but for now I wanna show you how to install the Gulp plugin. Because this entire Gulp workflow is based on the Gulp plugin, which is available via Node, right? Hopefully you get to understand why we need to use Node in the first place. So to install in the Gulp plugin, or any plugin, you say npm install, then you would put the name of the plugin. In my case, it's gulp. And I'm gonna add a flag here, save dev. save dev will basically download, install that plugin, and also add a reference to the plugin inside our package.json file. So we're gonna hit Enter, and I think after about ten seconds, Gulp 3.9.1 was installed. A reference to that was added right here. You can see a new section in our JSON file, it's called devDependencies. And then it tells, use gulp version 3.9.1. The actual plugin files were installed in a node_modules folder that right now we can't actually see, so let me show it right here. I have it hidden by default in my editor, so it's right here. node_modules, and this is basically a list of all the modules that I have installed for this particular project. And as you can see here, we have gulp. Now the package.json file is useful not only for keeping track of our project information and our plugins but, also, it's very important for when you're moving projects between computers, right? So for example, you can take this folder without node_modules, and you can share it with your team. You don't have to share the node_modules folder. Instead, your team members can take the source files, along with the package.json file, and they can simply do npm install. npm install will read package.json. It's gonna see what dependencies you have for developments, such as Gulp. And if they're not installed already, it's gonna download them and install them. Really, really cool. And that's how you can set up Node, npm, and also how to install your first plugin, in this case, Gulp. Now by itself, Gulp doesn't do anything, right? It's of no use to us. It needs other plugins to run properly. So we're gonna cover those plugins in the next couple of lessons. I'll see you there.