To make our site even faster,

let's take advantage of some tools we looked at in previous videos.

And some new ones to build a Gulp pipeline resource that will minify these resources

to their smallest footprint possible.

Getting started, I moved all of our resources into a source directory and

then our Gulp script will make a dist directory where it'll

put our processed files from the Gulp pipeline.

Let's add our first Gulp task.

This will process our CSS file to be an inline resource.

Then we need to update our HTML as well to support this,

remembering that we need to add the inline attribute to the link element.

Running gulp will move our index.html from source to dist..

Opening this file, we see that our CSS is inline in our HTML.

Next, let's combine the pikaday.css and theme.css into a single file, and

minify it as well.

For this, we are going to add gulp-concat and gulp-clean-css.

Let's add the variable references,

and then put in our new date-picker-compile Gulp task.

This should all pretty familiar from our previous lesson.

To make this work, we just need to add the date-picker-compile task

to the default task array.

Running gulp again, and then opening the CSS directory in the dist directory,

we will see our new minified CSS file.

Now we need to update our HTML to point to this new minified resource.

Looking good, but we also need to minify our JavaScript and HTML resources too.

To do this, we will use some new tools that we haven't yet discussed.

First is gulp-uglify, then gulp-rename.

We're gonna use pump, which is basically a dependency

requirement, and last, gulp-htmlmin.

Now we need to add a new task, compress-js.

And then we can add this to the default task array below.

Running gulp now will minify our JS files, and

we will see the new js directory appear in our dist directory.

Now we need to update our HTML file references by

adding the new min suffix to our files.

Run gulp again, and then open the processed index.html file to make

sure that we are processing correctly.

Let's get a local server running, so

that we can see how we are doing in the browser.

I'm using a local server called live-server, look for

a link in the teacher's notes.

We have a functional app, great.

Let's open the Inspector Network tab.

Oops, we need to be larger than the mobile spec, and

refreshing we see that we are 49.1K for desktop.

And then going down to mobile, we are at 34.2K.

I'm feeling pretty good about this.

Next, to really smash things down, let's gzip our files locally.

Again, we can move this process to Gulp by using gulp-gzip to see an example output.

But first, we forgot to add in the function that will minify our HTML.

We can easily add this to the inline source task.

Running gulp and opening our processed index.html file,

we see that we are minified, looks nice.

Going back to our gulpfile, let's get gzip in here.

Let's add the gzip variable that points to the Gulp gulp-gzip npm module.

In our CSS task, we need to pipe in the gzip function.

Then, in the compress-js task, we also need to pipe in this function as well.

Let's run gulp again, and now we see these newly processed

assets with .gz prefix in our file directory.

In our HTML,

we need to update the references to point to these new resource files.

To get this to work, I'm going to need a new type of server.

So let's kill the previous server, and for this, we're going to use http-server.

Once installed, we can run the command http-server -g.

Let's grab this URL, and then open in the browser.

Great, this is all still working.

Opening the inspector, we see oops, we forgot to run gulp again.

Great, we have the right resources.

Back in the browser, refresh, and we have 18K for the desktop.

And 13K for mobile.

Our load times are amazing, and

there is zero latency within the scope of this component.

Now this is performance.

So we hit some pretty amazing targets.

We were able to build a feature that is not dependent on a large library resource,

and in the end, only adds a few kilobytes of data.