Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Angular Automation: Gulp Serve

2:49 Angular 1.x lesson by

In this lesson, we are going to learn how to automatically serve our project via an HTTP server using gulp-serve. Being able to serve our project from an HTTP server allows us to bypass a myriad of development issues such as loading remote source files.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we are going to learn how to automatically serve our project via an HTTP server using gulp-serve. Being able to serve our project from an HTTP server allows us to bypass a myriad of development issues such as loading remote source files.

Avatar
Wilgert

Hi Lukas, thanks a lot for this series about Gulp. I have one request: can you normalize the audio a bit more between videos? There is quite a bit volume difference between them.

Avatar
Tim

I'm getting the following output, no error but cant see my site. Any ideas?

Server started at http://:::3000

Avatar
Lukas

@Tim,
I am assuming you just ran gulp serve. Make sure you run gulp build first, as this will actually create the build directory that the serve task is serving. If you just run gulp serve, it will try to serve the build directory which doesn't exist since it hasn't been created. Hopefully that helps!

In reply to Tim
Avatar
Paul

Earlier in the eggly project, I decided to serve my cateogries and bookmarks models up via php. it appears that serve doesn't support php. I overcame this by using gulp-connect-php. It seems pretty nifty: https://www.npmjs.com/package/gulp-connect-php

In this lesson, we are going learn to how to use the GulpServe package to serve up the contents of our build directory so that we can see it in the browser.

I'm a huge fan of the Serve package which at oftentimes use to quickly spin up an ACTP server to see the contents of a particular directory. If I wanted to see the contents of "Eggly" in this project, we are currently building everything to the build directory. I can go, serve, build, and it will serve up the project on Work 3000.

If I open up a browser here, I can go to localhost:3000, you can see the contents of Eggly are being served out of the build directory. I do not necessarily want to have to think about typing this in every single time.

It would be nice if I could just add this into my Gulp automation flow and have this happened automatically. We can accomplish that by using the Gulp Serve package.

I'm going to go ahead and install this. If you throw an error, go ahead and do that in pseudo mode. Now that that is installed, let's go ahead and define it in our Gulp file. I'm going to create a variable called "Serve" and I'm going to acquire the Gulp Serve module.

From here, let's go ahead and create a serve task. We're going to call this module and pass in the directory we want to serve from, which is the build directory. We can hop back in the command line and test this out, Gulp Serve.

You can see that we're serving on Work 3000. We'll go back to the browser, refresh it and you can see that, indeed, it is still working but we haven't made much progress in terms of automation.

Let's add this into our default task sequence. When we call Gulp, it will build our files and serve our files. This is a really easy way to serve up your files automatically from within your Gulp workflow.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?