Minifying your JavaScript files is extremly important to decrease the resource footprint for those visiting your site or using your application. Google's Closure Compiler is, in my opinion, the best JavaScript minifier I've ever used. Not only is it extremely accurate, it has the best compression of all the JavaScript minifiers I've used.

Installing and using the closure compiler

Verifying Java is installed

First, you must have Java installed on your machine. You can verify if you have Java by running the which command. which tells you the location of an executable if it exists in your $PATH, and returns nothing if it cannot find the executable.

$ which java

If the result is nonempty, we're good. Otherwise, do a Google search on installing Java for your OS.

Downloading the compiler

Download compiler-latest.zip and unzip it. The Closure compiler file is called compiler.jar. I thought this name was a bit too generic, so I renamed the file to closure-compiler.jar. I will refer to the Closure compiler file as such for the rest of the article.

By default, the Closure compiler does not have world readable permissions. This caused some issues for me, so I recommend making the file world readable.

$ chmod o+r closure-compiler.jar

If you are still operating within your Downloads directory, move the compiler file somewhere else. Personally, I store all my .jar files in /usr/local/jar, but it's completely up to you where you would like to store the compiler file.

Downloading and using the wrapper script

At this point, you are free to stop reading this tutorial and use the Closure compiler on your own. The compiler-latest.zip file we unzipped earlier contained a README with instructions on how to use the compiler. I have, however, created a simple bash script that works like so

$ minifyjs testing.js 
./testing.js minified. Now located at ./testing.min.js

You simply pass a javascript file to minifyjs, and it compresses the file using the Closure compiler and adds the conventional .min.js suffix to the output file.

The source for minifyjs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

#!/bin/bash
# Call the closure compiler to minify js. 
# Takes a filename myjs.x.y.js and outputs myjs.x.y.min.js, a minified version.

# The location of the closure compiler jar. You'll probably need to edit this.
CLOSURE_COMPILER=/usr/local/jar/closure-compiler.jar

case "$1" in
""|"-h"|"--help")
    echo "Usage: minifyjs path/to/js/file.js"
    exit 1;
    ;;
esac

jsDir=`dirname $1`
jsFile=`basename $1`

# There's no way to get "from the beginning to the Nth to last field" when
# specifying a range via cut, but we can get "from the Nth field to the end".
# By reversing the string, cutting, and reversing back, we get the desired
# effect. The following gets myfile.min.js from myfile.js
minjsFile=`echo $jsFile | rev | cut -d"." -f2- | rev`.min.js

jsFilePath=$jsDir/$jsFile
minjsFilePath=$jsDir/$minjsFile


java -jar $CLOSURE_COMPILER --js=$jsFilePath --js_output_file=$minjsFilePath
echo "$jsFilePath minified. Now located at $minjsFilePath"

raw source

To use this script on your system, create a file called "minifyjs", paste in the script source above, save it, and make it executable.

$ chmod +x minifyjs

Then move the newly created minifyjs file to some directory in your $PATH. I placed the script in /usr/local/bin

$ sudo mv minifyjs /usr/local/bin

You can now begin using the minifyjs script to quickly compress JavaScript files.

$ minifyjs path/to/myjavascript.js

Tagged as javascript, utilities