Some years ago, you could create a website with PHP, upload your source files through FTP to a server, and then go online. During those days, JavaScript was a tight piece of the whole system, used for UI tasks such as validating forms or small chunks of functionality.
Today, web is more JavaScript intensive, we are building web applications instead websites, this means that JavaScript is no more a trivial piece of applications, it is now a core piece. For this reason, it is important to pack our JavaScript application before being deployed for production.
You will learn the following in this chapter:
- Building a workflow to automatically process your source files
- Minifying the application script size
- Minifying the number of requests to the server when the application is loaded
- Minifying the images
- Optimizing the CSS files
- Wiring up everything in an HTML file
- Setting up a development environment to automatically reload the application
At the time of writing this book, there are many tools to build JavaScript applications; however, two of them are the most popular: Grunt and Gulp. Grunt is an older choice with a big community around and an amazing collection of plugins available. Gulp, on the other hand, is gaining more popularity each day and almost has the most popular plugins that exist for Grunt.
When you are developing an application, some tasks are very repetitive; for example, our contacts application uses Browserify to manage dependencies. It needs to rebundle the source code every time you make a change, which means that you need to run the browserify command each time:
$ npm bundle $ npm start
To run these commands every time you make a small change is a very tedious task, there should be a better way to do it:
Figure 7.1. Development workflow
The above figure shows the ideal development process; the first time you run the application, you should bundle the source files and run the BrowserSync web server and then open the browser. After that, for any change that you make in any source file, the application should be rebundled and then the browser should be refreshed to get the new changes.
Currently, we are manually doing this process; however, in the next section, you will learn how to automatize this task to let the machine do all this for you.