How to use Google's Closure to compile JavaScript

Question

Google just released Closure, which is a compiler to minify JavaScript.

On the product site, it says "The Closure Compiler has also been integrated with Page Speed".

How do I use Page Speed to compile my web pages JavaScript with Closure?

(Or, is there a web site that I can simply paste in my JavaScript to have closure minify it?

Solution 1

For a single file it's simple

java -jar $path_to_jar/compiler.jar --js input_file.js \
          --js_output_file output_file.js

For a multi-file project you can use calcdeps.py in combination with the compiler.jar

#!/bin/sh$
$CALCDEPS_PATH=/path/to_calcdeps  #directory containing calcdeps.py
$JAR_PATH=/path/to_jar            #directory containing compiler.jar
$CLOSURE_PATH=/path/to_closure    #contains directory "closure"
$CALCDEPS_PATH/calcdeps.py --path $CLOSURE_PATH \
                           --path . \
                           --compiler_jar $JAR_PATH/compiler.jar \
                           --input main_project_file.js \
                           --output_mode compiled \
                           > compiled_project_file.js

That way compiler gives meaningful information about type errors, etc. Type errors can be caught at compile time because compiler.jar uses certain JSDoc comments for type information.

Extra compiler flags can be passed to calcdeps.py along with -f or --compiler_flags options

If you want to use advanced optimizations set

--compiler_flags "--compilation_level=ADVANCED_OPTIMIZATIONS"

notice the double quotes and the equal sign - had to use that format in bash

Solution 2

The Closure compiler is now available as a JavaScript application. No need for the Java dependency anymore

There are a few ways to integrate with it. I have done it as part of Rollup

ex:

import rollup from 'rollup';
import closure from 'rollup-plugin-closure-compiler-js';

export default {
  entry: 'index.js',
  dest: 'dist/build.js',
  format: 'iife',
  plugins: [
    closure({
      languageIn: 'ECMASCRIPT6',
      languageOut: 'ECMASCRIPT5',
      compilationLevel: 'ADVANCED',
      warningLevel: 'VERBOSE',
      externs: [{src:`
                      var jQuery;
                      jQuery.fadeIn = function() {};  

                      var ko;  
                      ko.applyBindings = function(vm) {};
                      ko.computed = function(a,b) {};
                      ko.observable = function(a) {};
               `}],
    })
  ]
}

More info here:

http://www.syntaxsuccess.com/viewarticle/using-the-closure-compiler---advanced_optimizations