- [Instructor] Progressive web applications are fairly complex, and I'm using a lot of plugins in this project to go ahead and process how they work. So, I want to go over my Gulp process to show you how I've done this. Now, this is the finished version of my application. And you can see that I already have my Gulp process running. Now, in order to get this going, I've loaded up a series of different modules that I've included into these different variables right here. So I have a series of variables that load up the modules, all these modules are in this package.json file.
I'd like to have it in there just in case I want to add it later. Gulp-uglify will allow me to compress any of my files so that they're smaller. It's really important in progressive web applications because you want your final projects to be as small as possible. Another utility that I always load is called Gulp utility. It handles several mundane tasks within Gulp.js. I also load something called gulp-web server, which is what is allowing a server to run locally. Now this lets me run the application under local host.
This progressive web app will not work if you just load up the index.html file in a browser. Finally, in this project I'm going to be using jQuery, so I load that up, as well as sw-precache. We'll be using that to automatically generate our service worker. Finally, we're also using Handlebars to handle our templates in our progressive web application. Let's go back into the Gulp file, and I'll show you how I do everything. After I load up all the different modules into different variables, I also create a couple of variables for the location of the original documents that need to be processed right here in this source folder.
So you can see that what I'm doing is first I'm taking this app.js document, and putting it through Browserify. That way I can require any other files. So let's take a look at the app.js document. And you can see that I'm using some require statements to import jQuery as well as Handlebars. I'm also requiring the custom JS file from Bootstrap, right here, so this bootstrap_custom.js is going to be inserted into add.js, as well as jQuery at the very top, and Handlebars right underneath there.
Finally, we define the default task so that when we run Gulp in our terminal, we'll execute watch as well as web server. Notice that the web server task runs all of the other tasks as well. Now if you never worked with Gulp.js, you should definitely take a look at my other course, Web Project Workflows with Gulp.js, Git, and Browserify. Now that we've looked at the workflow, let's get started building this application.
- Using a progressive workflow
- Adding navigation HTML
- Making navigation interactive
- Adding data via templates
- Adding Bootstrap modals
- Adding a service worker
- Deploying your app