Angular Automation: Gulp Serve
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.
[00:00] 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.
[00:13] 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.
[00:42] 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.
[01:00] 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.
[01:13] 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.
[01:50] 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.
[02:12] 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.
[02:26] 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.
I'm getting the following output, no error but cant see my site. Any ideas?
Server started at http://:::3000
@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!
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
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.