Installing Gulp - Gulp.js Tutorial

- [Instructor] Let's take a look at how we can install Gulp into an existing project. Now you're going to need a couple of things before you get started. First, you're going to need at least a current version of Node JS so you want to go to this URL and download a version that you can use. You're also going to need to have Git in which you can get from this URL and when you download, if you're on a PC, you want to go ahead and install, Git Bash which will let you run the Linux commands that I'll be using in this project. So we have this project that I've created for you, so make sure you check out the working with the exercises video, and it has a bunch of files in it. Primarily, we're going to be concerned with this folder right here called source. It has this index that HTML page that you can see as well as some JavaScript and CSS files that I've placed in there for you. And when you open that index, that HTML file, you're going to see something like this. It's a website. If you want to find out more, you can check out this URL and I've also built a course around this layout that you can find in the library, just look for Bootstrap layouts when you do a search. So, we want to go ahead and create some automation for this project. And what you're going to need to do is first make sure that you pull up a terminal. If you have a Mac and you're using Visual Studio Code you can use this built-in terminal. If not, I like to use an application called Hyper which is cross-platform or you can use the Mac terminal or ultimately something like Git Bash. So what you want to do is make sure that you do have the current versions of Node so you can run this Node --version, this is pretty advanced version of Node, and you can also check for npm and run the --version command. Again, that's a pretty good version and you could see that this was the latest version that's at least currently as the recording of this video on the Node JS website. And then you're going to want to go ahead and run an initialization command. Now I do want to make sure that I am on the proper folder. So if you're not, go ahead and move over to where your project folder is. Mine happens to be on the desktop and it's called Gulp JS4 right now. So I'm going to do a CD to Gulp JS4. In here, it's essentially the same thing as what I'm seeing in this terminal so let's go ahead and just actually run things from right here. So the first command that I want to run will allow me to create a package to that JSON file. A package to that JSON file allows you to save all of the different modules and other properties about your project. So we can go ahead and create that really quick by hitting an npm init -y command. Now, if you just run npm init, it's going to ask you a series of questions, but if you're in a hurry, you can hit the -y command and it's just going to create a default package to that JSON for you which I think it's a little bit easier to edit these. So, we're going to modify some of these, I think the name will pick up whatever the name of your folder is and it looks like it's got some preset values in there. Let's see, I don't really need right now any scripts. So, all this main file right here. I don't even need this repository. Let's go ahead and get rid of those or keywords, I will put in my name under author, so you can put in yours. And usually we released this under an MIT license. You can see that when you downloaded the exercises project, you got all these additional files including this license right here. I don't really need a bugs or anything else in here, just make sure you don't delete too much and that you don't have an extra comma there at the end. So this is a very basic package to that JSON file and let's go ahead and pull up the terminal again and what we want to do here, let's go ahead and clear this out is run an npm install, and then do a gulp-cli -g. So Gulp comes in two parts, a command line interface called the Gulp-CLI which you want to install globally. So let's go ahead and hit return right there. And then there is a local version of Gulp that will go into your individual project. Right, it looks like that installed, I'll ignore that little message. And what I want to do now is just to make sure that I don't have an older version of Gulp JS installed, I'm going to do an npm install Gulp -D. This is going to get rid of any old versions of Gulp JS that have been installed and then what I want to do after this is install Gulp locally. All right, we'll also clear that out. And then finally, we want to do an npm install command and we'll do a save-dev gulp so, so what this will do is install Gulp JS locally on your project. It's going to add it to the package to that JSON file and save it as a developer dependency. That means that it's going to require Gulp while you're in development mode, but if you were to publish this as a Node project, then you would need the Gulp module for it to work. Right, so let's clear this out and if you want to take a look at your package to that JSON file, you should see something like this, everything that you had before plus this new section called dev dependencies and in there you should see Gulp and the current version of that Gulp package. You also got an additional file called package-lock.json. This is the same thing as the package.json but every time you install a project, that project has additional dependencies and so this is a more thorough version of everything that was installed into this new folder that you have right here called Node modules. Node modules is where all of your plugins or modules go and notice that even though we just installed Gulp JS, it actually went ahead and installed a ton of other stuff and this is pretty typical of Node projects, so, and that's all you need to get Gulp installed, we'll get started creating our first task and our Gulp file in the next video.