Chapter 10 ■ Deployment ConsiDerationsif (ncn && ncn.split(' ').indexOf(className) >= 0) {
results.push(node);
}
});
return results;
}
Listing 10-14 is the original source code. Listing 10-15 is a minified version of the same source code. It’s not pretty
is it? However, it produces a much smaller file, and it will require far less time to make it from the server to the user’s
browser. Sure, the comments are gone, the spaces and tabs are gone, and even the variable names have been changed
to something less recognizable, but the JavaScript interpreter doesn’t care about any of this, and the end result is
exactly the same.
Listing 10-15. Minified source code
function getElementsByClassName(e){var t=[];walkTheDOM(document.body,function(n)
{var r,i=n.className;if(i&&i.split(" ").indexOf(e)>=0){t.push(n)}});return t}
If your source code files are large, minification can make a significant difference to the perceived performance
and actual load times of your applications. Converting source code files to minified versions is not complicated either,
because there are plenty of tools and websites that can do this conversion for you. A particularly good way to handle
this is by using UglifyJS (https://github.com/mishoo/UglifyJS2); which calls itself a JavaScript parser, minifier,
compressor, or beautifier toolkit.
Bundling is slightly different but often goes hand-in-hand with minification. The idea behind bundling is that
you take a number of files and merge them all into just one file. For example, you might be using several AngularJS
files (the standard angular JavaScript file and, say, two more JavaScript files for routing and animation) and your own
applications files. As you would expect, each of these files causes a separate network request. Consolidating all of
these files into just one file means that there will be just one network request for the consolidated file; this can lead to
a decent performance boost. As with minification, you don’t need to do this yourself, as there are many tools available
that will do it for you.
If you decide to use these techniques, be sure to test your application in its minified and bundled form. Minifying,
in particular, can be problematic due to the way that AngularJS uses dependency injection; so it’s usually just a case
of finding an approach that is AngularJS friendly. You might consider looking at ng-annotate, which at the time of
writing, can be found at https://github.com/olov/ng-annotate.
Managing the Build Process
From a front-end perspective, it seems like only yesterday that websites and applications were nowhere near complex
enough to need dedicated build tools and task runners. Those days are gone; today they are rich in features and
functionality. This additional complexity has brought about the rise of tools such as Grunt and Gulp, both of which are
often termed task runners or build tools.
As I have hinted at throughout this chapter, there are often a number of things that you might need to consider
before you deploy your website to a production server. You might need to minify and bundle your application source
files, you might want to run a set of tests to make sure that your application is still watertight and free of bugs, and
you might want to adjust your configuration to reflect the live environment instead of the development or staging
environment. That’s a lot of work, and often there is much more to do.
Tools such as Grunt and Gulp can automate this work, and they have proven to be a huge advantage in both large
and small applications alike.
To illustrate what a task runner does, let’s take a quick look at Grunt. In the Grunt world, you create a JavaScript
file called Gruntfile.js and then you configure and load your tasks using JavaScript. Listing 10-16 shows an example
of what a Grunt.js file might look like.