Grunt and Flare logos
Daniel Ferguson Flare Tips

Minifying Flare HTML output files with Grunt

One of my MadWorld 2017 presentations is all about improving the performance of Flare HTML5 outputs. Quick page loads are an important factor in the overall success of your help. Slow page load times leave your users looking for answers to their questions elsewhere.

While the overall performance of any website is subject to dozens of variables, there are a number of those variables that Flare authors can control. I’m covering a handful of those at my MadWorld presentation. This article is focused on minifying Flare output files.

What does minify mean?

To minify a file basically means to remove needless data from the file, such as white space. When an html, css, or javascript file gets minified, it has all its white space removed (and possibly some other items as well depending on the configuration of the minification tool you use).

How do we minify Flare files?

It’s important to understand that we don’t need or want to minify Flare source files. Source files in your Flare project should remain just as they are–unminified and human-readable.

The files that we want to minify are our Flare output files. Those are the files that ultimately get uploaded to the web server.

The solution outlined in this article is a tool that can run as part of the Flare build process that minifies html, css, and js files, and it optimizes image files. Since it runs after the files are generated by Flare, only the output files get minified. The Flare source files are left alone.

Setting up Grunt to minify your files

Grunt logo

In this solution, we’re going to use a JavaScript automator called Grunt to do the minification work for us. Follow these steps.

Set up your hard drive and install Node.js
  1. Create a C:\grunt folder on your hard drive.
  2. Click here to download the grunt-setup.zip file I created. Extract the zip file, and copy the package.json file and the Gruntfile.js file to the C:\grunt folder.
  3. Go to nodejs.org, and download and install Node.js.
Install grunt and the minification plugins
  1. Open a command prompt.
  2. Enter cd C:\grunt to switch your command prompt to the grunt folder.
  3. Enter npm install grunt --save-dev to download and install grunt.
  4. Enter npm install -g grunt-cli to install the Grunt command line interface.
  5. Enter npm install grunt-contrib-uglify --save-dev.
  6. Enter npm install grunt-contrib-htmlmin --save-dev.
  7. Enter npm install grunt-contrib-cssmin --save-dev.
  8. Enter npm install grunt-contrib-imagemin --save-dev.

All of the software packages necessary to run the Grunt minifier are now installed.

Set the path in the Gruntfile.js file
  1. Open Gruntfile.js in a code or text editor. The gruntfile is in the C:\grunt folder.
  2. On line 8 of the Gruntfile, enter the output path to your Flare HTML output. Note that you’ll need to “escape” the back slashes in the path by adding back slashes in the path. See the notes in the gruntfile for examples.
Test grunt

From the command line, enter grunt buns -v. This will run the minification script in verbose mode so you can see the results. (Why “buns”? Here’s why).

Running grunt as part of your Flare target

With the introduction of the Build Events option in Flare target files, we can now run command line scripts as part of Flare target builds, and that is exactly what we’re going to do with this script.

  1. Open your Flare target file.
  2. Go to the Build Events tab.
  3. In the Post-Build Event Command box, enter the following: 
    cd C:\grunt
grunt buns
What if I have multiple targets I want to use this on?

In a previous step, we set up the Gruntfile.js file to point to a specific Flare output directory. If you have multiple Flare HTML targets that you want to minify, then it’s more useful to pass the output folder in as part of the Post-Build Event Command.

  1. Open Gruntfile.js. Comment out line 8 by placing // before the content of the line.
  2. Uncomment line 16 by removing the // at the beginning of the line.
  3. In your Flare target, enter the following in the Post-Build Event Command window: 
    cd C:\grunt
grunt buns --projectPath="your_flare_output_folder_path"

This command now passes in the –projectPath value into the Gruntfile, thereby allowing you to set the output path on a target-by-target basis.