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