Automate script minification

- [Instructor] Just like with linting, if you don't like the idea of copying and pasting your JavaScript onto an online service just to minify it, you don't have to. You can use a command line tool and you can even automate the process using some form of task runner. There are several command line tools available for minification. The most popular ones are UglifyJS and minifier. The only problem is neither one of them currently support ECMAScript 2015 or ES6 code. So right now as I'm recording this if you want to use ECMAScript 2015 markup, like for instance Const and Let, you need to go check out the UglifyJS-ES6 package.

This is the beta version of UglifyJS. So the version that's coming down the pike and eventually this package will make its way into UglifyJS proper. Until then we have to use this ES6 variety. In my command line, I've navigated to the Exercise Files for this movie 11_08. From here I'll run the command npm install -g uglify-js-es6. This pulls the package down onto my computer and installs it globally.

Now to minify script.js in my current project, all I have to do is say uglifyjs then mention the file I want to uglify, - o for output and where I want to place the file. So in this case, I want to call it script.min.js. The operation takes about a fraction of a second. My minified file appears over here. If you open it you'll see it's truly minified.

Looks like a big mess. Much smaller than the original. I'm already referring to script.min.js in my index file and that means all I have to do is run this in the browser to make sure everything still works. Test my application. And if I cheat, you'll see everything still works exactly as expected and that's the whole point of minification.

We take a huge pile of JavaScript, make it a lot smaller, and now that we have command line tools to help us do the job, the process is also way easier.