Angular Automation: Installing Gulp Globally and Locally
In this lesson, we learn how to get up and running with Gulp by initializing our project with npm init and then installing the Gulp CLI globally and then installing it locally to our project. We finish the lesson off by creating our first Gulp file and running our first Gulp task.
[00:00] In this lesson, we are going to get up and running with gulp by globally installing the gulp command line interface, and then adding gulp to our local project. We will then create our first gulp script, and run our first default gulp task. Before we can do anything, we need to make sure that we have node and MPM installed. I'm just going to hop into the command line and do node-v and npm-v.
[00:26] You can see here that I do have node installed and npm installed. Now we can use npm init to initialize our project with some defaults. This creates the package.json file. I'm going to go with this default. Most of the time I will just leave everything as is, just filling in a few small pieces of data.
[00:50] Eggly automation, yes, yes. We'll go with...Just for fun. Set the author to myself, license is MIT, this is OK. If we hop up here, you can see that we have a package.json file. Now that we have initialized this project with npm, let's go ahead and install gulp globally. We'll go npm install-g gulp.
[01:26] Now, I'm going to throw an error here, because I need to run global npm installs as sudo. I'll just go sudo!!, which will run my last command. I'll enter in my password, and it will then install gulp as a global package. Now that I've installed gulp globally, I need to add it locally to my project. I'll go npm install gulp--save-dev.
[02:03] This will add a local dependency into my package.json file. If we go back up here, then we can see here that gulp is installed as a dev dependency. Now that we've installed gulp locally, let's go ahead and create our gulp file, gulp file.js. We'll go ahead and add this to Git, and we will initialize gulp.
[02:41] Now that gulp is available, let's create our first default task. Your default task is what will get to run when you just type in gulp from the command line and you do not specify any other parameters such as a named task. We'll go gulp, task, and from here we are just going to log to the console, "Hello Gulp."
[03:14] We'll hop back into the command line, and we will just type gulp. You can see here that it's using our gulp file, starting the default task, logging "Hello Gulp" to the console, and then giving a time stamp for how long it took to actually finish this task. Let's review what we've covered in this lesson.
[03:35] The first thing that we did is that we verified that we have node and npm installed, then we initialized the project using npm init, which generated the package.json file. Then, we installed gulp globally using npm install-g gulp, which installed the gulp command line interface globally for us to use.
[03:55] Then we added gulp locally to our project using npm install gulp--save-dev, which added this dev dependency to our local project. Then we created this gulpfile.js, and we initialized gulp and added our default task, so that when we type gulp, this task gets run. This is all you need to know to get up and running with gulp. See you in the next lessons.