Friday, July 3, 2015

How To: Minify JS and CSS with ColdFusion

If you're reading this post, I can assume two things.
  1. You're running ColdFusion and need to minify JS and/or CSS files.
  2. You've researched other solutions such as complex regex routines or CFCs and are not satisfied with those solutions.
Regarding #2, modern minification is complex and tedious. If you've tried writing your own routines, you know what I mean. Not to mention, effective minification consists of more than just code formatting. So what's the answer? Well, there is already a clear and proven minification winner: YUI Compressor. This utility is widely used, reliable, and efficient. It also includes useful options to give you some level of control as well as insight.

Now that we've picked our minification engine, how do we make it work with ColdFusion?

First you need to get YUI Compressor installed on your server and YUI Compressor relies on Rhino, so we need to get that installed as well. All of this relies on you having Java installed, but since you are running ColdFusion I am assuming you do!

DOWNLOAD RHINO (recommended release at time of this post is 1.7R5)
  • Install to directory of choice, i.e. C:\apps\rhino\rhino1_7R5
  • Add to Windows CLASSPATH
    • System Properties > Advanced > Environment Variables > System Variables > CLASSPATH
      • If CLASSPATH system variable doesn't already exist, add it with value of "c:\apps\rhino\rhino1_7R5" or your chosen install directory.
      • If CLASSPATH system variable already exists, edit it by adding ";c:\apps\rhino\rhino1_7R5" or ";" followed by your chosen install directory.

DOWNLOAD YUI COMPRESSOR (recommend release at time of this post is 2.4.8)
  • Install to directory of choice, i.e. c:\apps\yuicompressor\yuicompressor-2.4.8.jar

Verify you can run YUI Compressor from command line
  • Open a command prompt in a test directory with a non-minified JS file present, i.e. test.js
  • Run command $ java -jar c:\apps\yuicompressor\yuicompressor-2.4.8.jar -v c:\test\test.js -o test.min.js
  • The "-v" argument causes output to include analysis of the JS with tips for improvements. Don't include this option if you are minifying CSS.
  • You should see test.min.js created in the current/test directory.

Run minification from within ColdFusion:
  • Use <cfexecute> to run YUI Compressor against file in need of minification.
  • minifyResult will contain the command prompt output.
  • minifyError will contain error information.
<cfexecute name="java" arguments="-jar c:\apps\yuicompressor\yuicompressor-2.4.8.jar c:\test\test.js -o test.min.js" variable="minifyResult" errorVariable="minifyError" timeout="10"/>

  • ColdFusion runs cfexecute from the ColdFusion bin, so this is where the minified file will be generated, so we need to move the generated file from the CF bin to the desired target directory.
  • The cf_bin_path variable value will likely be different for your install, so you need to update this variable to point to your actual CF bin directory.
<cfset cf_bin_path = "c:\ColdFusion\runtime\bin">
<cffile action = "move"
source = "#cf_bin_path#\test.min.js"
destination = "c:\target-directory\test.min.js">