This course will be retired on February 24, 2020.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that gulp is installed, and you’ve seen how powerful it is, you’re ready to create a task! In this video, we’ll do just that by adding a Gulpfile!
-
To Follow along with this video:
- clone the course repo if you haven't done it yet - instructions here.
- option, stash your changes to the code:
git stash
- run
git checkout Stage1Video4
from within the course repo - run
npm install
to install project dependencies
If you want to add a gulpfile with a different name, you will use the
--gulpfile
flag when running gulp commands. Let’s say you have a file calledtasks.js
in the root of your project. To run any of the tasks defined, you’d do it like thisgrunt --gulpfile tasks.js yourAwesomeTask
. Check out more in the Gulp docs about using the CLI.Node Basics Course taught by Andrew Chalkey.
-
0:00
You've gotten to see how to install Gulp.
-
0:02
Now it's time to start crafting your first task.
-
0:05
I'm back in the terminal in my project repository again.
-
0:10
I can see all my files here.
-
0:13
Remember, you can follow along by cloning the GitHub repository and
-
0:17
checking out the branch that corresponds to this video.
-
0:21
So, let's do that.
-
0:33
Keep in mind that there's also instructions on how to do that in
-
0:36
the repa read me.
-
0:38
Now, I can see that I have Gulp installed.
-
0:41
There's no Gulp file.
-
0:42
And if you remember, the Gulp file is where the Gulp engine looks for
-
0:46
your tasks.
-
0:47
So, let's add one.
-
0:49
I'm going to add the file literally named gulp dot js,
-
0:52
and I can do this in my text editor by adding new file.
-
1:00
My machine is actually setup to run sublime text commands from the terminal.
-
1:05
So I can just run subl gulpfile.js to create a new file called gulp file.
-
1:11
And when I save the file, it gets persisted here,
-
1:17
for advanced users, I just wanna point out
-
1:20
that you can actually name the file whatever you'd like.
-
1:24
However, it does take some extra options when running Gulp commands.
-
1:28
Since Gulp will automatically look for a file called
-
1:33
gulpfile.js, that is what we'll use in this course.
-
1:39
Now check out the teacher's notes for
-
1:41
an example of using a file not named gulpfile.js to define your tasks.
-
1:47
The first thing I'm going to add in the file is the use strict statement.
-
1:56
The use strict statement causes the node engine to run the file
-
2:01
in a strict interpretation of the JavaScript.
-
2:05
Feel free to check out my workshop on the use strict statement, to see why this
-
2:09
is a really great idea and there's a link to that in the teacher's notes.
-
2:16
Now, I'm gonna load the gulp module by requiring it and
-
2:20
assigning it to the variable gulp.
-
2:24
[SOUND] Requires a node method and if you haven't used node before,
-
2:30
check out some of the other Treehouse courses that go in depth with node basics.
-
2:38
There's also a link to those in the teachers notes.
-
2:42
We'll use the variable name gulp because it is typically a best practice
-
2:46
to name the variable after the module.
-
2:49
However, you don't have to and we'll actually see several instances in this
-
2:53
course where it won't make sense to do so.
-
2:57
The final thing that Gulp needs is for us to define a task.
-
3:01
To do this, we're going to use Gulp's task method.
-
3:07
The task method will receive the name of a task as the first parameter.
-
3:12
In our case, we're gonna name it, hello.
-
3:14
And it takes an anonymous function as the second parameter.
-
3:21
Which serves as a task call back and
-
3:24
executes any number of things you want it to.
-
3:27
For now we're simply gonna log a string.
-
3:38
Later we'll see how to replace this function to do some useful work, now
-
3:44
at this point, I can actually run the task by typing in gulp hello, just like this.
-
3:54
And don't forget to save your file.
-
3:59
Now when I run gulp hello I can see that gulp started the hello task.
-
4:05
It did something very trivial and simple for me.
-
4:08
And then it finished it.
-
4:12
Notice that I had to add the name of the task
-
4:14
when I invoked gulp from the terminal.
-
4:16
It will be a lot easier if I just typed gulp and gulp knew which task to run.
-
4:24
That could actually be done, we just need to set up a default task.
-
4:29
To do this, I'll use the task method again.
-
4:38
This time I am literally going to call the task default.
-
4:44
This is a special task in Gulp, and it's used when you wanna
-
4:47
define a task that's run, when Gulp isn't given any arguments.
-
4:53
And this time, instead of providing a function as a second parameter,
-
4:56
I'm going to provide an array of dependencies.
-
5:00
Now, we only have one other task defined so far.
-
5:04
We're gonna make that task a dependency of the default task.
-
5:09
When we say dependency, what we mean is that Gulp is going to run every
-
5:14
dependency before it starts running the default task.
-
5:22
And now for the work of our default task, we'll add another callback function,
-
5:27
and we'll log a string that will make it obvious what's going on.
-
5:39
Now let's run the default task by just typing in gulp on its own Great.
-
5:47
I can see that Gulp started the hello task, which was our dependency.
-
5:51
It did the work of the hello task, which was simply logging a string, in this case.
-
5:55
And then, it finished.
-
5:57
Now, after it finished, it started the default task.
-
6:01
Did the work of the default task and then finished.
-
6:06
Nice work getting Gulp up and running, and defining your first task.
-
6:11
After this code challenge, we're going to begin making our tasks useful for
-
6:15
our project.
-
6:16
Keep up the solid work.
You need to sign up for Treehouse in order to download course files.
Sign up