Closure Compiler - hybrid compilation for source using jQuery and Closure - javascript

I'm in the process of migrating a project from jQuery to Closure. I have some code that is only half-migrated that I would like to compile. The uncompiled source works fine. I want to know what compile command to compile it using SIMPLE_OPTIMIZATIONS.
The compile command for the original jQuery-based code was this:
java -jar ~/closure/closure-compiler/build/compiler.jar \
--js ~/Sites/mysite/js/bc_school6_2.js \
--js ~/Sites/js_common/bc.job_school.js \
--js ~/Sites/js_common/bc_help.js \
--js ~/Sites/js_common/validation.js \
--js ~/Sites/js_common/md5.js \
--js ~/Sites/js_common/chosen.jquery.js \
--js ~/Sites/js_common/jquery.reveal.js \
--js ~/Sites/js_common/printArea.js
> ~/Sites/mysite/js-minified/bc_school6_2s.js
The SIMPLE_OPTIMIZATIONS compile command for the source when it is fully migrated will be this (although the fully-migrated code will use ADVANCED_OPTIMIZATIONS):
closure-library/closure/bin/build/closurebuilder.py \
--root=closure-library/ \
--root=closure-templates/javascript/ \
--root=bc/ \
--namespace="bc.bc_school6_2" \
--output_mode=compiled \
--compiler_jar=closure-compiler/build/compiler.jar \
--compiler_flags="--compilation_level=SIMPLE_OPTIMIZATIONS" \
> ~/Sites/mysite/js-minified/bc_school6_2s.js
At present, the namespace is not properly set up in the source, so the latter compile process won't work properly.
Is it possible to compile the source using the Google Closure library, but then add in all my jQuery files from js_common folder? Can I do it in one compile command, or if not, can I compile my goog code, and then incorporate the jQuery material?
Thanks.

You can compile your goog code and then include the jQuery code as external code. This method will also let you compile your code in ADVANCED MODE and still be able to use jQuery in it's original form.
To do this, you will have to use a .js file that contains all of your extern declarations. Then you use the --externs flag to tell the closure compiler where to look for externs. See the sample usage below:
java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS \
--js makeallnotes.js --externs extern1.js --externs extern2.js
To find out more about how to declare externs, see this tutorial. Basically, they are used to tell the closure compiler about an external API or library you are using.
There is actually a jQuery extern file included with the Google Closure source code. Find the version of jQuery you are using on this page.
On a side note, I'd look into using Plovr to build your Closure Project. It lets you use a configuration a file to set all of your build parameters and will save a lot of time if you are building your code often.

Related

How do I tell Closure Compiler to include all source files from a given directory only for modules?

I have a directory of scripts:
/scripts/module-foo.js
/scripts/module-bar.js
/scripts/site.js
/scripts/some_other_non_module_script.js
the two module scripts export modules:
goog.module('foo');
exports = 'foo';
And the site.js script includes them:
var foo = goog.module.get('foo');
I can get this to work fine if I manually specify each source file in the compiler command:
java -jar compiler.jar ... --js module-foo.js --js module-bar.js --js site.js
but I'm trying to avoid that. If I specify
--js ./**
It works, but I get the source from site.js as well as some_other_non_module_script.js in the same output file. I only want site.js
site.js will need to have a goog.provide statement itself - something like goog.provide('mysite'). Then you can use the --only_closure_dependencies and --closure_entry_point flags.
java -jar compiler.jar ... --js scripts/**.js --only_closure_dependencies
--closure_entry_point mysite
Learn about the Manage Closure Dependencies Flags

Jetbrains adding Closure as an external library

I am trying to add Closure as an external library in PyCharm.
These lines demonstrate where I installed closure:
Chriss-MacBook-Pro:closure chris$ pwd
/Users/chris/DevLibrary/closure-library/closure
Chriss-MacBook-Pro:closure chris$ ls
bin css goog known_issues
I've tried adding various directories in the edit libraries dialog such as:
/Users/chris/DevLibrary/closure-library/
/Users/chris/DevLibrary/closure-library/closure
/Users/chris/DevLibrary/closure-library/closure/goog
I've also tried adding the individual files.
But every time my File Watcher runs I still get:
java -jar /Users/chris/Projects/housemaps/compiler.jar
--compilation_level SIMPLE_OPTIMIZATIONS --js housemap.js housemap.js:1: ERROR - required "goog.dom" namespace never provided
goog.require('goog.dom'); ^
1 error(s), 0 warning(s)
The external libraries feature of Jetbrains is for providing your IDE with access to the source code (for code completion, error checking, ect) for Javascript files that are not included with your project, but are going to be hosted externally.
Closure is not designed to be hosted externally as it is supposed to be used with the closure compiler.

Closure compiler app using jquery

I have manage to create a small size js application that uses jQuery and jQuery UI using google's closure compiler with advanced optimizations. Just for clarity: I have not compiled jQuery itself, just my app that uses jquery. I would like to know if somebody can confirm that this idea also works for bigger and more complex apps.
The procedure is as follows:
0.- You have an html file that calls jquery-1.4.3.min.js, test1.js, and test2.js
1.- compile your app and export a property map file
java -jar closure-compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js test1.js --js test2.js \
--property_map_output_file prop.out > min.js
The property map is a key/value file that contains the name of the property before and after compilation:
aprop:a
html:b
each:c
2.- Copy prop.out to prop.in and edit it so that jQuery properties (functions) are replaced by the same name (this could be easily automated with a list jquery's function):
aprop:a
html:html
each:each
3.- Recompile using prop in as property map input
java -jar closure-compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js test1.js --js test2.js \
--property_map_input_file prop.in > min.js
4.- Now in your html, include min.js and jquery-1.4.3.min.js. The application should be functional but your code should be faster and smaller.
This will minify your code, not jquery's.
As I said, I have tested this in a small app. If somebody has a bigger and complex app, it would be nice to know that this works.
Thanks,
heg
Have you considered using externs. As far as I know that is the way to go to keep the jQuery methods from being shortened in your code. Externs for jQuery exist as contributions to the closure project.
For jQuery UI you might want to try this. It is something I came across once but haven't tested it myself
BTW: If you're interested, there is this extremely handy build tool for closure: Plovr. I use it all the time and I made externs work with it.

Compress all file .js with Google Closure Compiler Application in one File

I would like to Compress all my file .js in a same directory in one file with Google Closure Compiler in a command line.
For one file it's :
java -jar compiler.jar --js test.js --js_output_file final.js
But I didn't find in the doc how put my other file at the end of final.js without write over the last compress file ?
I would like something like that :
java -jar compiler.jar --js --option *.js --js_output_file final.js
It's possible or must I do a programm who add all file in a file and after compress it ?
Thank you if you can help me !
java -jar path/to/closure-compiler/build/compiler.jar \
--js input_one.js \
--js input_two.js \
... \
--js_output_file compiled_output.js
I tried Orbits' answer, but It didn't really work perhaps the version I use is a newer version. The command I use is :
java -jar compiler.jar --js file1.js file2.js file3.js --js_output_file --js_output_file compiled_output.js.
Assuming that you’ve installed the Closure Compiler with Homebrew on a Mac, you can also concatenate all files and then pipe them to to Closure (this should also work the java -jar way, but I haven’t verified it):
cat $(ls scripts/*.js) | closure-compiler --js_output_file main.js
Here are five globbing techniques for including multiple input files, with documentation extracted from the CommandLineRunner class:
(1) This is a variation of muka's technique, removing the --js flag, which is not needed:
java -jar compiler.jar \
--js_output_file build/out.js `find ./src/*.js`
From the docs:
The --js flag name is optional, because args are interpreted as files by default.
This will include all .js files in /src/, but won't include any files in subdirectories of /src/.
(2) Similar to 1, but will include all .js files in /src/ and all its subdirectories:
java -jar compiler.jar \
--js_output_file build/out.js `find ./src/ -name '*.js'`
(3) Similar to 2, but uses xargs:
find ./src/ -name '*.js' \
| xargs java -jar compiler.jar \
--js_output_file build/out.js \
--manage_closure_dependencies
From the docs:
It is convenient to leverage the additional arguments feature when using the
Closure Compiler in combination with find and xargs:
find MY_JS_SRC_DIR -name '*.js' \
| xargs java -jar compiler.jar --manage_closure_dependencies
The find command will produce a list of '*.js' source files in
the MY_JS_SRC_DIR directory while xargs will convert them
to a single, space-delimited set of arguments that are appended to the
java command to run the Compiler.
Note that it is important to use the
--manage_closure_dependencies option in this case because the
order produced by find is unlikely to be sorted correctly with
respect to goog.provide() and goog.requires().
(4) The v20140625
release added support for the ** (globstar) wildcard, which recursively
matches all subdirectories.
For example, this will include all .js files in /src/ and all its subdirectories:
java -jar compiler.jar \
--js_output_file build/out.js './src/**.js'
More info here. From the docs:
You may also use minimatch-style glob patterns. For example, use:
--js='**.js' --js='!**_test.js'
to recursively include all js files that do not end in _test.js
From the Java docs:
The following rules are used to interpret glob patterns:
The * character matches zero or more characters of a name component without crossing directory boundaries.
The ** characters matches zero or more characters crossing directory boundaries.
(5) The v20140625
release also added a new feature: if the input path is a directory, then all .js files
in that directory and all subdirectories will be included.
For example, this will include all .js files in /src/ and all its subdirectories:
java -jar compiler.jar \
--js_output_file build/out.js './src/'
More info here.
You can use KjsCompiler: https://github.com/knyga/kjscompiler
. Compiles multiple JavaScript files with Google Closure Compiler application in a right order
How to solve your problem:
1. Add annotations to js files, like this:
/**
* #depends {lib/somefile.js}
**/
If you do not care about compilation chain, you can ignore this step.
2. java -jar kjscompile.jar
You can look for example here: https://github.com/knyga/kjscompiler/tree/master/examples
<exec executable="java">
<arg line="-jar ../lib/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --language_in ECMASCRIPT5 --js_output_file=${compressdir}/js/controllers/jscontrollersfiles.js ${webappdir}/js/controllers/*.js" />
</exec>
The github of google closure doc gives the below command.
If you have multiple scripts, you should compile them all together with one compile command.
java -jar compiler.jar --js_output_file=out.js in1.js in2.js in3.js ...
You can also use minimatch-style globs.
# Recursively include all js files in subdirs
java -jar compiler.jar --js_output_file=out.js 'src/**.js'
# Recursively include all js files in subdirs, excluding test files.
# Use single-quotes, so that bash doesn't try to expand the '!'
java -jar compiler.jar --js_output_file=out.js 'src/**.js' '!**_test.js'
Source : https://github.com/google/closure-compiler#compiling-multiple-scripts

How to use Google's Closure to compile JavaScript

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?
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
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
"Page Speed 1.4 Beta integrates the Closure Compiler to minify JavaScript files automatically. However, you will need to download and install the Page Speed Beta and Closure Compiler separately."
http://code.google.com/speed/page-speed/download.html
I haven't installed this version yet, but I'm fairly certain that Page Speed will present you with compiled code in its optimization recommendations.
It seems that Closure Compiler is integrated with Page Speed only for Windows.
Use the closure compiler with PHP (hosted via CURL or local via command line tool)
http://bohuco.net/blog/2009/11/google-closure-compiler-with-php/
If you need to compile multiple js files or if you would like to simplify compilation process, you may use kjscompiler: https://github.com/knyga/kjscompiler (based on google closure compiler)

Categories