Simple install and use Google Closure

By Nethru Limited (www.nethru.com)

This article is about installing and using Google Closure.
For the use of Google Closure, it covers closure dependency file update and advanced optimization.

1. To install Google Closure,
we need to download closure library, closure templates and closure compiler.

download closure library from SVN
http://closure-library.googlecode.com/svn/trunk/

download closure templates from either SVN or website
http://closuretemplates.googlecode.com/svn/trunk/
http://closure-templates.googlecode.com/files/closure-templates-for-javascript-latest.zip

download closure compiler from either SVN or website
http://closure-compiler.googlecode.com/svn/trunk/
http://closure-compiler.googlecode.com/files/compiler-latest.zip

closure_folder

2. Create hello_world folder and related files as below
hello_world_folder

below is hello.js

// as package name in Java
goog.provide('hw.hello');

/**
 * "@param" is more than just documentation when used with the Closure Compiler
 * @param {string} userName
 */
hw.hello = function(userName) {
  alert('Hello, ' + userName);
};

below is main.js

goog.provide('hw.main');

// include other dependancies
goog.require('hw.hello');

hw.main = function() {
  hw.hello('World');
};

// Ensures the symbol will be visible after compiler renaming.
goog.exportSymbol('hw.main', hw.main);

below is index.html

<!doctype html>
<html>
  <head>
    <script src="../closure/closure-library/closure/goog/base.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <script>
      hw.main();
    </script>
  </body>
</html>

Open a terminal, go to hello_world folder directory and update closure library deps.js file

python ../closure/closure-library/closure/bin/calcdeps.py \
--path ../closure/closure-library/third_party/closure/goog \
--path ../closure/closure-library/closure/goog \
--path ./ \
--output_mode deps > ../closure/closure-library/closure/goog/deps.js

Now, you can open index.html and it will pop up an alert “Hello, World”.
If you did not update the deps.js file, browser will show “Error: goog.require could not find: hw.hello”

3. Use Closure Compiler Advanced Optimization
Open a terminal, go to hello_world folder directory and run following script to compile in ADVANCED_OPTIMIZATIONS Level.

python ../closure/closure-library/closure/bin/calcdeps.py \
--path ../closure/closure-library/third_party/closure/goog \
--path ../closure/closure-library/closure/goog \
--path ./ \
--input main.js \
--compiler_jar ../closure/closure-compiler/build/compiler.jar \
--output_mode compiled \
--compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \
--compiler_flags="--create_name_map_files=true" \
> compiled/main-compiled.js

Create an index-compiled.html that contains only main-compiled.js file

<!doctype html>
<html>
  <head>
    <script src="main-compiled.js"></script>
  </head>
  <body>
    <script>
      hw.main();
    </script>
  </body>
</html>

_vars_map.out and _props_map.out are variable renaming and property renaming map files.
hello_world_folder_compiled

Open index-compiled.html and it will pop up an alert “Hello, World”.

Before compilation may no longer work after compilation, due to aggressive renaming done in Advanced mode.
Thus, make sure the application works in uncompiled mode and test the application thoroughly after compilation.
Try to use _vars_map.out and _props_map.out to help debugging if the code works before compilation but not after.

Leave a Reply

Your email address will not be published. Required fields are marked *