FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Loading Gulp Plugins and Creating the Default Task

In this lesson, you’re going to learn how to load Gulp plugins and also create your first task.

2.1 Loading Gulp Plugins and Creating the Default Task

Hello, and welcome back to this course. In this lesson, you're going to learn how to load Gulp log ins. Now, there are two ways you can do that, manually or automatically with the help of a plug in. If you're just getting started with Gulp, and Note, and MPM, I recommend loading these plugins manually because it gives you a better understanding of how things work. However, once you get more experience with this, a plugin like, I believe it's called Load Go Plugins is a good choice for you. Now let me quickly show you how to load such a plugin. Not how to download, we already covered that in a previous lesson, but how to load. Such a plugin in your gulp file, so in here I'm just gonna add some comments just to make things look pretty. I'm gonna use strict here. That's gonna help us with debugging and it will also show some JavaScript errors that we might miss otherwise. It's optional, of course. And then I'm gonna have a section here. I'm gonna say "load plugins" and what you would do is simply declare a variable. You can call this whatever you want. Of course, respecting the limitations of the JavaScript code, but I'm gonna call it Gulp, and then you will say require Gulp. As you can see Visual Studio code recognizes the Gulp plugin from my package JSON, it's one of the small details that make this editor pretty awesome, and that's it [LAUGH] it's very very simple Of course if you have other plugins installed, you would load them the same way. Either declare a variable, again, or simply continue here, right. Plugin require, and then the name of the plugin. The name of the plugin must match this bit exactly. Let's move on and create the default task. And here's the thing with gulp, it can specify one of the tasks as the default one and that will be executed when you type gulp in the command line. So the way to define a task, I'm gonna say the main task, the way to define it is super simple, you just say galp, all right? That's why I needed to load this plug in first. If you gave this a different name then that name needs to match here as well, right? So if you poll that awesome plugin then you would put awesome plugin here. So I'm gonna say gulp.task, so I'm invoking the task method of the Gulp object, and the task method can receive a few parameters, the first one is the name of the task, so I'm gonna set default, and the second parameter, is the task function, so you can either create an anonymous function or You can specify an already existing function. In my case, I'm just gonna use an anonymous function here. And inside I'm just gonna say console log hello from Gulp. So now, if we go back to our terminal. We are in our working folder and I'm gonna type gulp. So this is gonna use the gulp file that we created. It's gonna start the default task. It's gonna execute whatever is inside my default task. In my case it's a sample console log that you see right here. And then it finishes that task after the set time, and that's it. You just wrote and executed your first Gulp task. Of course, you can call this task by its name. Gulp default, for example, it's gonna do the exact same thing. So if I had a different task here. Let's copy this just for the sake of it, let's call this test, right? If I say gulp now, it's gonna execute the default task, but if I say gulp, whoops, sorry about that, gulp test. It's gonna execute the test task. Now this default task is actually far from being complete. Ultimately it's gonna run all of the other tasks, but for now we have to keep it simple because we haven't written any other task. So let's continue building our Gulp workflow by learning how to do browser reloading, and also watching for file changes. That's coming up in the next lesson.

Back to the top