First, confirm you have Ant installed on your system by entering the following in your command-line tool:
ant–version
If you do not have Ant, install it first before proceeding to the next step.
Note
Ant is installed by default on Macs, while it is available as a package to install on most Linux platforms. For Windows, installing Ant is slightly more complicated. You need to install the Java SDK from www.oracle.com/technetwork/java/javase/downloads/index.html and then download WinAntcode.google.com/p/winant/ and point the installer to Program Files/Java/jre6/bin/.
Next, you need to install ant-contrib , a utility that makes a lot of functionality available for Ant that HTML5 build script uses. WinAnt does this automatically, when you use it to install Ant on Windows. However, for Linux users, you can use yum to install it as a package. On Mac, you can install MacPorts (www.macports.org/install.php) and then enter the following in your command-line tool (typically Terminal):
sudo port install ant-contrib
Finally, ensure that the image optimization tools are installed. For Mac users, you need to make sure you have jpegt
ran
(www.ijg.org/) and optipng
(optipng.sourceforge.net/) installed and on your path. You can install these two files by entering the following in your command-line terminal:
sudoport install jpeg optipng
Note
The PATH is an environmental variable that holds a list of folders that your command-line interface searches through when you enter a command. You can learn about how to add folders to the path from www.cs.purdue.edu/homes/cs348/unix_path.html.
If you are on Windows, the Ant build script project contains the required binaries for these image tools for you to install.
In Terminal (or your command-line tool), we will navigate to our project folder and install the build script using Git, as shown in the following screenshot:
We now have to rename the build script folder from ant-build-script to build before we continue. This is done by using the following command:
mv ant-build-script build
Once that is done, let us navigate to the build script folder by using the following command:
cd build
Now, we shall execute the build script! Go to your command-line tool and enter the following:
ant build
If you set up your build script folder correctly, then you should get the following screen:
Then, after the tasks are executed, you should get the following output:
Now, you have a brand new publish folder where the optimized files are stored. Let us look at what all have been optimized, by opening the index.html page from the publish folder, in Chrome browser and using the Chrome Developer Tools' Network tab to observe the files that are loaded and their associated sizes.
Please note that you must load the page with the Network tab open to log the files being requested.
The Network tab records all images that are fetched for use on index.html. We can see that the images that are fetched for the index.html page in the publish folder are noticeably smaller in size.
In the following screenshot, the bottom section of the screenshot shows the list of images in the publish folder, which are noticeably smaller than the images used in our original project (listed in the top section of the screenshot):
We note that before we used the build script, our CSS file was called main.css and was approximately 21 KB, but after using the build script, the file has been renamed and is now almost half the original size, as shown in the following screenshot:
After executing the build script, you will notice that main.js and plugin.js have been combined into one. Not only have they been combined together, but they have also been minified, leading to a smaller file size of the final script file.
The index.html page from the publish folder generated via the build script invokes only four JavaScript files as shown in the bottom section of the following screenshot, compared to five JavaScript files originally placed in the folder (top section):
The HTML, CSS, and JS files in the publish folder have no comments that HTML5 Boilerplate files contain.
The Ant build script has a few tasks that are not executed by default, but are available to you if you need them. The following sections explain what these tasks allow you to do.
By default, the Ant build script does not remove whitespaces from the index.html page when optimizing; if you want to also remove whitespaces in the HTML file and minify it, you can execute the following:
ant minify
When executing the build script, you will notice that the script takes the longest time to optimize images. If you are executing the build script to merely test the final production-ready files, then you would not have to optimize images. In this case, you should execute the following command:
ant text
CSS Lint (csslint.net) is an open source CSS code-quality tool that performs a static analysis of your code and flags style rules that are invalid or may be the cause of problems. To use CSS Lint on your project's CSS files, just enter the following:
ant csslint
Typically, you will observe a bunch of warnings. CSS Lint has a lot of options you can set. To do this, open the project.properties file within the config folder in build. Uncomment this line by removing the #, by using the following command:
#tool.csslint.opts =
Enter all the options you want to use with CSS Lint after the = sign and save. The various options that you can use are mentioned at github.com/stubbornella/csslint/tree/master/src/rules.
JSHint (jshint.com) is a community-driven tool to detect errors and potential problems with your JavaScript code and enforce your team's coding conventions. To execute JSHint on your JavaScript files, go to your project and execute the following:
ant jshint
Once executed, we see a bunch of errors being listed for our main.js. The corrected file is included within the code for this chapter. Once corrected, you will also notice a whole slew of errors being thrown for the code in plugin.js. This is because we used the minified code of the smooth-scroll plugin. Let us replace it with the unminified code from the project repository at github.com/kswedberg/jquery-smooth-scroll/blob/master/jquery.smooth-scroll.js.
Now, we get a bunch of errors all telling us we need to use the stricter comparison operator. Let us turn this off for our current project. We can do this by opening the project.properties file within the config folder under our build folder and uncomment the following line that allows you to use your own options for JSHint:
#tool.jshint.opts
Change it to the following snippet:
tool.jshint.opts = maxerr=25,eqeqeq=false
Our errors have disappeared!
The concatenated and minified CSS and JS filenames are set to uniquely generated strings, which ensures a cached local copy of these files never get loaded when a new production build is deployed to the server. By default, the number of characters used in the filename is 7. You can set it to a smaller or larger number by changing the following line in project.properties within the config folder inside the build folder:
#hash.length = 7
Uncomment the previous line and then alter the number 7 to the number of characters you prefer, using the following syntax:
hash.length = <number of characters you prefer>
Minor changes need to be made to make sure that these Ant build scripts work as intended for Drupal. Do note that there is not much help in minifying the HTML pages as a significant portion of the markup will be generated by Drupal or WordPress.
There is a minor change you need to make to build.xml to make it work with the file structure of Drupal or WordPress.
Look for <echo message="Minifying any unconcatenatedcss files..."/> within the file. Just after that line of code, change the following:
<filesetdir="${dir.source}/${dir.css}/" excludes="${concat-files}" includes="**/*.css"/><filesetdir="${dir.source}/${dir.css}/" excludes="${concat-files}, ${dir.build.tools}/**/*.css, ${dir.intermediate}/**/*.css, ${dir.publish}/**/*.css" includes="**/*.css"/>In the project.properties file within the config folder of the build folder, add the following code:
dir.css = . dir.images = images file.root.stylesheet = style.css
WordPress or Drupal themes require you to split your markup into separate files (for example, footer.php for WordPress or footer.tpl.php for Drupal). You need to know in which of these files the following code is located:
<!-- scripts concatenated and minified via build script --> <scriptsrc="js/plugins.js"></script> <scriptsrc="js/main.js"></script> <!-- end scripts -->
Use that filename (for example, footer.php) to set the file.root.page property in the project.properties file by using the following code:
file.root.page = <name of file>
A sample Drupal and WordPress theme that contains the modified build script are provided in the code for this chapter.