We are ready to deploy our site! But before we do that, we should ensure we minimize all our scripts and optimize the images, so that these pages load as quickly as possible anywhere in the world. We can automate these tasks by executing a script on the command line. Let us look at the options we have.
Once you are done with your project, you would like to generate files that strip comments and are optimized for loading quickly. There are software build systems that are typically used in software projects with similar goals. HTML5 Boilerplate's build scripts provide tasks scoped to what a typical web development project would need.
The script should be used only after you have confirmed your project is ready for deployment and it has been well tested. The build script merely automates the process of removing comments, optimizing files, and making sure the files are production ready.
There are currently two kinds of build scripts that are actively maintained by HTML5 Boilerplate contributors; these are explored in the following section.
The Ant build script is a set of files that work on top of the Apache Ant build system (ant.apache.org/) that has been available since the early days of HTML5 Boilerplate. It offers a variety of options, described as follows:
- Publishes files to test, development, and production environments
- Checks syntax and code quality of your script files with JSHint or JSLint, or your stylesheets with CSSLint
- Concatenates and minifies all your JavaScript files into a single file and updates the HTML pages with reference to this new file
- Cleans up and tidies HTML markup by removing comments, whitespaces, and compressing inline styles and scripts
- Concatenates and minifies all your stylesheets and updates the HTML pages with reference to the new file instead of multiple CSS files
- Compiles style preprocessor files such as Less or Sass into the resulting CSS stylesheets and updates references in HTML pages
- Optimizes PNG and JPEG images within the
imgfolder using OptiPNG fromoptipng.sourceforge.net/and JPEGTran fromjpegclub.org/jpegtran/respectively - Builds documentation from your scripts using JSDoc3 from
github.com/jsdoc3/jsdoc
A new build script that builds on top of Node, found at nodejs.org/, is under active development. While it is not out for production use yet, it offers a lot of tasks that are similar to the Ant build script with some new features described as follows:
- Concatenates and minifies all your JavaScript files into a single file and updates the HTML pages with reference to this new file
- Concatenates and minifies all your stylesheets and update the HTML pages with reference to the new file instead of multiple CSS files
- Cleans up and tidy HTML markup by removing comments, whitespaces, and compressing inline styles and scripts
- Optimizes PNG and JPEG images within the
imgfolder using OptiPNG and JPEGTran respectively
Watch the project files for changes, and automatically run the build script and reload open pages in browsers when they do.
Depending on what platforms you are comfortable with, you can choose one over the other. Both the build scripts are stable enough to use to deploy your production files, so your choice is down to what you are most comfortable using.
If you already have Ant installed, the Ant build script might be an obvious choice. If you find yourself using Node frequently or using it in your projects, then the Node build script could be a good start. In this chapter, we will look at using both, so you can become comfortable with either of them.