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.