Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 830 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Minifying your output with grunt-uglify

2:23 JavaScript lesson by

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.


egghead.io comment guidelines

Avatar
egghead.io

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

Avatar
Cipriano

At the very end of this video you mentioned that the new minfied app.js has not been included into the index html. Where is this topic covered?? how is this automated?

In reply to egghead.io
Avatar
Matt

Ditto to Cipriano's question. Where is the video for the proper way to handle inclusion of minified files into the html file?

Avatar
Joel

There is no further lesson on this topic.

In reply to Matt
Avatar
Matt

I ended up going with a grunt tool called grunt-targethtml.

This was a painful process. There are a couple tools out there with what I consider cryptic documentation. It would be nice if the tutorials had direction for the step of inserting the new file(s) into the html page, as the author describes: "Take note though that we haven't included our new app.js in our index HTML, so it's not going to be used if we were to refresh the page. We'll get into that in a few more steps."

Avatar
jean-michel

I agree with Matt's point

The global picture is missing in this serie

  • which context would you use concat/uglify when uglify can do the job (as shown by John in an earlier post)?

  • a post showing how to connect the build version to have a functional site running would have been good especially if this is "painful"

Joel, egghead folks, what do you have to say?

Thanks

Jean-Michel

In reply to Matt

Man: Let's go ahead and use Grunt to minify our JavaScript. In our last step, we took all of our JavaScript files and using Grunt, we concatted them all under one file called, "app.js."

You can see that it used a minified version of Angular, but our code, we wrote, still isn't minified. So, let's go ahead and get this minified, so that everything's minified.

To do this, we're going to use a Grunt plugin called, "Uglify." Uglify has lots of options but today, we're simply going to use it to minify our JavaScript.

Let's go ahead and install it. You start by typing mpm install grunt-contrib-uglify and use the save dev flag so that it saves it to your package.json.

Once that's installed, let's go ahead and set it up in our Grunt file. Let's start by loading the task into our Grunt file.

To do this, we'll just add Uglify here. Now, we can add an Uglified section to our net config.

Instead of Uglify, let's add a JavaScript target. The JavaScript target takes two sections, a source which is a directory of all the files that we want to Uglify and a destination, which is the target for the new minified version of JavaScript.

In the last step, we concatinated all of our JavaScript files into one build\app.js. Let's go ahead and use that file as our source but also, as our destination.

We'll take the concatinated file, we'll minify it, and replace itself in the build directory with our minified version of itself.

At this point, all we have to do is in the terminal, we run Grunt Uglify. Now that that's done, we can see that the files were minified. We can actually see how much they've shrunk during the minification.

We only had a few files, it didn't shrink a ton. With more code, it gets significantly smaller.

When you look at the code here, you can see that there's clearly a difference in our app.js. The minification happened and shrunk everything to as small as possible form.

At this point, we have a production ready JavaScript file. Take note though that we haven't included our new app.js in our index HTML, so it's not going to be used if we were to refresh the page. We'll get into that in a few more steps.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?