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

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

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

Closure Compiler: ERROR - cannot read

I downloaded Google Closure Compiler from official Google website (https://developers.google.com/closure/compiler/docs/gettingstarted_app). And then run it to minify my widget.js but i received the error below:
C:\Users\Administrator\Downloads\compiler-latest>java -jar
compiler.jar --js "wi dget.js" \ --js_output_file "output.js" ERROR -
Cannot read: \
1 error(s), 0 warning(s)
I tried to change my widget.js content, if the widget.js contain some syntax error it will tell me know. But it seem that the "error - CANNOT READ \" always show up even my widget.js is empty or just have a line alert('test');
How can i resolve that error?
You should run your compiler as following:
java -jar compiler.jar --js widget.js --js_output_file output.js
You can put multi js files and seperate by a space without double quote ("), single quote (') or slash (/) like your case.
Hope this help.

Closure Compiler - hybrid compilation for source using jQuery and Closure

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.

Creating a script to use Google Closure for multiple javascript files

I need to use the Google Closure compiler.jar to minify a huge project I am working on. I have multiple js files that I want to compile into a single game.min.js file. I know I can use the following:
java -jar compiler.jar --js file1.js --js file2.js --js etc, etc --js_output_file game.min.js
...but I have a LOT of files and as I understand it Closure doesn't have support for adding a directory and finding all the *.js files residing under that directory. My fumbling google searches are not giving me any tools that I can use for the job (or nothing that works at any rate).
Has anyone out there found / used / written a script that loops through a directory and spits out all the .js files into a single minified file? I am hopeless with php, python, etc, so any help greatly appreciated.
You can use ant to automate the use of the closure compiler.
I do it in two separate steps, concatenation then compilation :
<concat destfile="src/somepath/app.concat.js">
<filelist dir="src/somepath">
<file name="a.js" />
<file name="b.js" />
<file name="c.js" />
<file name="d.js" />
</filelist>
</concat>
<jscomp compilationLevel="simple" warning="quiet" debug="false" output="src/app.min.js">
<sources dir="src/somepath">
<file name="app.concat.js" />
</sources>
</jscomp>
Be careful that the order of the files is important. That's why you can't simply pass a fileset to the jscomp task.
You can also use wildcards when specifying files. You could change your example to:
java -jar compiler.jar --js *.js --js_output_file game.min.js
This should combine all of the .js files in your current working directory into the output file you've specified.
You should concatenate all your source files before you apply Google Closure compiler.
For all related tasks you could use Ant build tool. Also, there is a great Grunt.js project, which is more convenient for JS. There are grunt-contrib-concat and grunt-shell npm modules for Grunt.js, the first is for concatenation, the other is for running console commands.
Your Gruntfile.js could look like this:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
concat: {
js: {
src: ['src/js/*.js'],
dest: 'dist/pre-build.js'
}
},
shell: {
optimize: {
command: 'google closure compiler command here',
stdout: true
}
}
});
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task.
grunt.registerTask('default', ['concat', 'shell:optimize']);
};

Makefile to combine js files and make a compressed version

I am trying to write a basic makefile that combines multiple js files into a single one and then does the same but compresses them.
So far I have this one that can make the compressed version fine.
# Set the source directory
srcdir = src/
# Create the list of modules
modules = ${srcdir}core.js\
${srcdir}sizzle.js\
${srcdir}json2.js\
${srcdir}ajax.js\
${srcdir}attribute.js\
${srcdir}content.js\
${srcdir}cookie.js\
${srcdir}css.js\
${srcdir}event.js\
${srcdir}json.js\
${srcdir}location.js\
${srcdir}opacity.js\
${srcdir}ready.js\
${srcdir}size.js\
${srcdir}init.js
# Compress all of the modules into spark.js
spark.js: ${modules}
java -jar yuicompressor.jar -o $# $^
Does anyone know how I would go about adding an uncompressed version called spark-dev.js? I have been trying to use cat but I didn't get very far. This is my first makefile I have ever written.
EDIT
I tried this code with cat
spark-dev.js: ${modules}
cat $# $^
You were almost there :-) This should work:
spark-dev.js: ${modules}
cat > $# $^
Background: The function of cat is to (try to) open all the files listed on its command line, and dump the contents to stdout. The > $# syntax is understood by the shell to mean "create the file $#, and connect this command's stdout to it", so now we end up with the contents of $^ combined together into $#.

Categories