As a developer, you've probably already discovered

that how you work is almost as important as what you're working on.

For instance, being able to quickly make changes to your source code and

then see how the app changes is really valuable.

One of the mantras you will probably come to accept is that as a developer,

you wanna focus more on code and

a lot less on all the other overhead that comes with writing code.

To a certain extent, some of this overhead is simply unavoidable.

But through automation,

Gulp can make certain aspects of your workflow run much smoother.

Before you start creating your own Gulp tasks,

let's look at a project that already has a bunch of tasks defined.

This project will give you an idea of two of the biggest ways Gulp can save you

time, in your development workflow and in the application build process.

I’m going to take you through a development workflow with Gulp.

Don’t worry about following along or

understanding every aspect of what’s happening.

This is just meant to be an overview, and we’ll actually revisit this project

later in the course when you know a bit more about Gulp.

Here I have a project open in Sublime Text on my machine.

It's an angular project,

and you can see that the app has already been scaffolded out for me.

All my source files are gonna live here in this source folder.

We can see that it is a project that has Gulp installed already, and

that's because I see this gulpfile.js here.

This is the file that the Gulp engine will look for in defining all of my Gulp tasks,

and it always lives in the root of your project.

Now when I go to my terminal, I see that I am in the root of my project by typing ls.

Now, from here, I can run Gulp's development server by typing Gulp serve.

The serve task is defined in the project's Gulp file, and

it runs Gulp's development server.

Gulp now opens a browser window automatically

with the application running.

Now if I make a file change and

then save it, the browser automatically refreshes the page.

Let's see how this happens really quick by changing the color of our header here.

So I go into my index Sass file.

We're going to change the header which is in a jumbotron div class.

We'll make it super obvious and make the header red now.

So when I save this file, I can see that Gulp

automatically compiled my Sass and reloaded the browser window.

It's awesome to see how we can save ourselves seconds in our development

workflow, but let's see how Gulp allows us to save even more time

when we actually build our application for production.

I'll go back to my terminal.

Stop this process, and I'll actually reset the terminal so

we can see a little bit better.

Now we'll run Gulp on its own.

And running Gulp on its own is not necessarily special.

It actually just runs another Gulp task that is defined.

In this case,

the task that runs when you execute Gulp on its own is called the default task.

And you can see everything that Gulp has done in the terminal window.

It's building my files and minifying them, and

a number of other really important helpful things.

Now when it's done, it throws a production ready application in a folder called dist.

That folder's here, you can also see it in Sublime Text.

That's actually compiled all my scripts, my styles, my fonts and

put them in a folder to be served as static files in production.

Most importantly, Gulp does all of this without me even having to think about it.

Enough looking at other projects, let's create our first Gulp task and

start making our projects easy to work with.