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
Gulp can be used to automate any number of common tasks. When you put these tasks together, you are typically doing it in one of two ways, for development or to build your application for deployment. In this video, we’ll look at why Gulp is valuable for both of these scenarios.
-
0:00
As a developer, you've probably already discovered
-
0:03
that how you work is almost as important as what you're working on.
-
0:08
For instance, being able to quickly make changes to your source code and
-
0:12
then see how the app changes is really valuable.
-
0:16
One of the mantras you will probably come to accept is that as a developer,
-
0:21
you wanna focus more on code and
-
0:23
a lot less on all the other overhead that comes with writing code.
-
0:28
To a certain extent, some of this overhead is simply unavoidable.
-
0:32
But through automation,
-
0:33
Gulp can make certain aspects of your workflow run much smoother.
-
0:38
Before you start creating your own Gulp tasks,
-
0:41
let's look at a project that already has a bunch of tasks defined.
-
0:46
This project will give you an idea of two of the biggest ways Gulp can save you
-
0:50
time, in your development workflow and in the application build process.
-
0:56
I’m going to take you through a development workflow with Gulp.
-
0:59
Don’t worry about following along or
-
1:01
understanding every aspect of what’s happening.
-
1:04
This is just meant to be an overview, and we’ll actually revisit this project
-
1:08
later in the course when you know a bit more about Gulp.
-
1:12
Here I have a project open in Sublime Text on my machine.
-
1:17
It's an angular project,
-
1:18
and you can see that the app has already been scaffolded out for me.
-
1:23
All my source files are gonna live here in this source folder.
-
1:28
We can see that it is a project that has Gulp installed already, and
-
1:33
that's because I see this gulpfile.js here.
-
1:37
This is the file that the Gulp engine will look for in defining all of my Gulp tasks,
-
1:42
and it always lives in the root of your project.
-
1:46
Now when I go to my terminal, I see that I am in the root of my project by typing ls.
-
1:54
Now, from here, I can run Gulp's development server by typing Gulp serve.
-
2:05
The serve task is defined in the project's Gulp file, and
-
2:08
it runs Gulp's development server.
-
2:12
Gulp now opens a browser window automatically
-
2:14
with the application running.
-
2:17
Now if I make a file change and
-
2:18
then save it, the browser automatically refreshes the page.
-
2:23
Let's see how this happens really quick by changing the color of our header here.
-
2:33
So I go into my index Sass file.
-
2:41
We're going to change the header which is in a jumbotron div class.
-
2:50
We'll make it super obvious and make the header red now.
-
2:55
So when I save this file, I can see that Gulp
-
2:59
automatically compiled my Sass and reloaded the browser window.
-
3:04
It's awesome to see how we can save ourselves seconds in our development
-
3:07
workflow, but let's see how Gulp allows us to save even more time
-
3:12
when we actually build our application for production.
-
3:15
I'll go back to my terminal.
-
3:20
Stop this process, and I'll actually reset the terminal so
-
3:24
we can see a little bit better.
-
3:26
Now we'll run Gulp on its own.
-
3:33
And running Gulp on its own is not necessarily special.
-
3:37
It actually just runs another Gulp task that is defined.
-
3:41
In this case,
-
3:41
the task that runs when you execute Gulp on its own is called the default task.
-
3:47
And you can see everything that Gulp has done in the terminal window.
-
3:53
It's building my files and minifying them, and
-
3:58
a number of other really important helpful things.
-
4:01
Now when it's done, it throws a production ready application in a folder called dist.
-
4:09
That folder's here, you can also see it in Sublime Text.
-
4:16
That's actually compiled all my scripts, my styles, my fonts and
-
4:19
put them in a folder to be served as static files in production.
-
4:26
Most importantly, Gulp does all of this without me even having to think about it.
-
4:33
Enough looking at other projects, let's create our first Gulp task and
-
4:37
start making our projects easy to work with.
You need to sign up for Treehouse in order to download course files.
Sign up