GUI Client tool for Closure Compiler

Google built some excellent tools for JavaScript development. One of them is the Closure Compiler. A common development scenario is at the end of every project when we finally deploy the code in production we usually minify and merge all .js files into single or fewer numbers of files. To do this I normally use Closure Compiler, but there is a small problem like if you use the closure compiler’s online version you can’t actually minimize the .js files on your local machine, there is of-course a offline version of the compiler but you have to use that from command line, and which is not much user friendly specially if you are in a hurry or not using any automated build tool, So I decided to fill this gap, and built this GUI wrapper for the great Closure Compiler.

You can use this from your pc, to run this you will need java (jre) in your pc, i built this using java 7 so earlier versions of java will NOT be able to run it.

Download:

No installation required just download and click. Grab the tool from here, the jar version is for all operating system, but i also built an exe of it but it will still require java. (jre 7)

How it works:
At first i tried to reverse engineer the whole compiler just like i did for the css-minimizer but well its a huge thing, thousands of Classes inside it. I felt lost, but there was a easy way out, Google provides a REST api for it, and I decided to use it. So that means this GUI tool can’t work offline (unless you select the merge option), when you select .js files and press the compile buttons it merge all the js files and requests Google and then saves the response.

One important thing, closure compiler checks for errors and warning. So if there is any error or warning in your JavaScript it will be included in to the response. So always check the compiled file before including into the project.

Tips: Hold Ctrl button to add multiple JavaScript files in the list.

Okay now try it. and give me feedback and suggestions. Thanks

GUI tool for Google Closure Compiler
Requires Java 7 to run.

JavaScript best practices

  • It is recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to affect the download of the entire page.
  • An inline script placed after a <link> tag referencing an external stylesheet caused the browser to block while waiting for the stylesheet to download. This is done to ensure that the inline script will have the most correct style information with which to work. So the best practice is never putting an inline script after a <link> tag.
  • Each <script> tag blocks the page from rendering during initial download, it’s helpful to limit the total number of <script> tags contained in the page. This applies to both inline scripts as well as those in external files.
  • For external Javascript, each HTTP request brings with it additional performance overhead, so downloading one single 100 KB file will be faster than downloading four 25 KB files. To that end, it’s helpful to limit the number of external script files that your page references.