Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Minifying your output with grunt-uglify

    Aaron FrostAaron Frost

    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.

    gruntGrunt
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Man: 00:00 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."

    00:11 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.

    00:20 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.

    00:31 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.

    00:50 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.

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

    01:03 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.

    01:20 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.

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

    01:39 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.

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

    01:59 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.

    02:08 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.

    Discuss

    Discuss