AngularJS Essentials

[ 147 ]
Chapter 8
Creating a distribution package
Before being ready for the production environment, you need to create an optimized
distribution package of your product. This is very important for the following reasons:
• Performance: Through the concatenation step, you could drastically reduce
the amount of requests that the browser needs to perform every time the
application is loaded. All the scripts of the application are concatenated in
just one file. After that, the minifying step removes all the white spaces,
line breaks, and comments, and replaces the names of the local variables
and functions and makes them shorter than the original. It contributes to
improving the performance by reducing the amount of bytes that need to be
transferred. Also, the HTML and CSS files can be minified, and the images
can be optimized by specific processors. Grunt has a lot of plugins for
performing its tasks.
• Security: By removing the white spaces, line breaks, comments, and
replacing the local variable names, the JavaScript files become much
harder to understand. However, take care before submitting an AngularJS
application to this kind of process. As we saw in Chapter 4, Dependency
Injection and Services, we should apply the array notation for the dependency
injection mechanism by declaring each dependency as a string; otherwise, the
framework will not find the expected dependency, throwing an error.
• Quality: There are two steps that improve the quality of the distribution. The
first one is the validating step. With tools such as JSLint or JSHint, the code
is validated against rules that verify things such as the absence of semicolons,
wrong indentation, undeclared or unused variables and functions, and many
others. Also, the tests are executed, preventing the process from proceeding
in the case of errors.
In order to follow each step of our workflow, we are now going to discover how to
install and configure each plugin:
1. Cleaning step: The first step is about cleaning the files that were created in
the last distribution. This can be done through the grunt-contrib-clean
plugin. Take care about which directory will be configured, avoiding any
accidental deletion of the wrong files. To install this plugin, type in the
following command:
npm install grunt-contrib-clean --save-dev
After this, we just need to configure it inside the Gruntfile.js file,
as follows:
Gruntfile.js
module.exports = function (grunt) {
www.it-ebooks.info