Minifying your output with grunt-uglify
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.
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.
There is no further lesson on this topic.
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."
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
Ditto to Cipriano's question. Where is the video for the proper way to handle inclusion of minified files into the html file?