Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Build a Gulp pipeline resource that will minify the resources in our app to their smallest footprint possible.
Server Tools:
Further Reading:
Dead code elimination and tree-shaking in JavaScript build systems, by Roman Liutikov
Lose weight in the browser: JavaScript
For a refresh on Gulp Sequencing, review Putting Multiple Tasks Together from the Treehouse Gulp Basics course.
Some more info on Gulp packages used here:
-
0:00
To make our site even faster,
-
0:02
let's take advantage of some tools we looked at in previous videos.
-
0:06
And some new ones to build a Gulp pipeline resource that will minify these resources
-
0:11
to their smallest footprint possible.
-
0:14
Getting started, I moved all of our resources into a source directory and
-
0:18
then our Gulp script will make a dist directory where it'll
-
0:20
put our processed files from the Gulp pipeline.
-
0:24
Let's add our first Gulp task.
-
0:25
This will process our CSS file to be an inline resource.
-
0:29
Then we need to update our HTML as well to support this,
-
0:32
remembering that we need to add the inline attribute to the link element.
-
0:36
Running gulp will move our index.html from source to dist..
-
0:40
Opening this file, we see that our CSS is inline in our HTML.
-
0:48
Next, let's combine the pikaday.css and theme.css into a single file, and
-
0:53
minify it as well.
-
0:54
For this, we are going to add gulp-concat and gulp-clean-css.
-
0:59
Let's add the variable references,
-
1:01
and then put in our new date-picker-compile Gulp task.
-
1:05
This should all pretty familiar from our previous lesson.
-
1:10
To make this work, we just need to add the date-picker-compile task
-
1:14
to the default task array.
-
1:18
Running gulp again, and then opening the CSS directory in the dist directory,
-
1:23
we will see our new minified CSS file.
-
1:27
Now we need to update our HTML to point to this new minified resource.
-
1:34
Looking good, but we also need to minify our JavaScript and HTML resources too.
-
1:40
To do this, we will use some new tools that we haven't yet discussed.
-
1:45
First is gulp-uglify, then gulp-rename.
-
1:48
We're gonna use pump, which is basically a dependency
-
1:53
requirement, and last, gulp-htmlmin.
-
2:00
Now we need to add a new task, compress-js.
-
2:04
And then we can add this to the default task array below.
-
2:10
Running gulp now will minify our JS files, and
-
2:13
we will see the new js directory appear in our dist directory.
-
2:19
Now we need to update our HTML file references by
-
2:22
adding the new min suffix to our files.
-
2:32
Run gulp again, and then open the processed index.html file to make
-
2:36
sure that we are processing correctly.
-
2:40
Let's get a local server running, so
-
2:41
that we can see how we are doing in the browser.
-
2:44
I'm using a local server called live-server, look for
-
2:46
a link in the teacher's notes.
-
2:55
We have a functional app, great.
-
2:58
Let's open the Inspector Network tab.
-
3:00
Oops, we need to be larger than the mobile spec, and
-
3:03
refreshing we see that we are 49.1K for desktop.
-
3:06
And then going down to mobile, we are at 34.2K.
-
3:12
I'm feeling pretty good about this.
-
3:14
Next, to really smash things down, let's gzip our files locally.
-
3:18
Again, we can move this process to Gulp by using gulp-gzip to see an example output.
-
3:24
But first, we forgot to add in the function that will minify our HTML.
-
3:28
We can easily add this to the inline source task.
-
3:31
Running gulp and opening our processed index.html file,
-
3:34
we see that we are minified, looks nice.
-
3:38
Going back to our gulpfile, let's get gzip in here.
-
3:41
Let's add the gzip variable that points to the Gulp gulp-gzip npm module.
-
3:49
In our CSS task, we need to pipe in the gzip function.
-
3:54
Then, in the compress-js task, we also need to pipe in this function as well.
-
4:04
Let's run gulp again, and now we see these newly processed
-
4:08
assets with .gz prefix in our file directory.
-
4:13
In our HTML,
-
4:14
we need to update the references to point to these new resource files.
-
4:28
To get this to work, I'm going to need a new type of server.
-
4:32
So let's kill the previous server, and for this, we're going to use http-server.
-
4:38
Once installed, we can run the command http-server -g.
-
4:44
Let's grab this URL, and then open in the browser.
-
4:52
Great, this is all still working.
-
4:55
Opening the inspector, we see oops, we forgot to run gulp again.
-
5:11
Great, we have the right resources.
-
5:13
Back in the browser, refresh, and we have 18K for the desktop.
-
5:20
And 13K for mobile.
-
5:22
Our load times are amazing, and
-
5:24
there is zero latency within the scope of this component.
-
5:28
Now this is performance.
-
5:32
So we hit some pretty amazing targets.
-
5:34
We were able to build a feature that is not dependent on a large library resource,
-
5:39
and in the end, only adds a few kilobytes of data.
You need to sign up for Treehouse in order to download course files.
Sign up