variables that UglifyJS will assume to be constants (unless defined in
scope). For example if you pass `--define DEBUG=false` then, coupled with
dead code removal UglifyJS will discard the following from the output:
-
- if (DEBUG) {
- console.log("debug stuff");
- }
+```javascript
+if (DEBUG) {
+ console.log("debug stuff");
+}
+```
UglifyJS will warn about the condition being always false and about dropping
unreachable code; for now there is no option to turn off only this specific
Another way of doing that is to declare your globals as constants in a
separate file and include it into the build. For example you can have a
`build/defines.js` file with the following:
-
- const DEBUG = false;
- const PRODUCTION = true;
- // etc.
+```javascript
+const DEBUG = false;
+const PRODUCTION = true;
+// etc.
+```
and build your code like this:
Note, however, that there might be situations where comments are lost. For
example:
-
- function f() {
- /** @preserve Foo Bar */
- function g() {
- // this function is never called
- }
- return something();
- }
+```javascript
+function f() {
+ /** @preserve Foo Bar */
+ function g() {
+ // this function is never called
+ }
+ return something();
+}
+```
Even though it has "@preserve", the comment will be lost because the inner
function `g` (which is the AST node to which the comment is attached to) is
Assuming installation via NPM, you can load UglifyJS in your application
like this:
-
- var UglifyJS = require("uglify-js");
+```javascript
+var UglifyJS = require("uglify-js");
+```
It exports a lot of names, but I'll discuss here the basics that are needed
for parsing, mangling and compressing a piece of code. The sequence is (1)
There's a single toplevel function which combines all the steps. If you
don't need additional customization, you might want to go with `minify`.
Example:
-
- var result = UglifyJS.minify("/path/to/file.js");
- console.log(result.code); // minified output
- // if you need to pass code instead of file name
- var result = UglifyJS.minify("var b = function () {};", {fromString: true});
+```javascript
+var result = UglifyJS.minify("/path/to/file.js");
+console.log(result.code); // minified output
+// if you need to pass code instead of file name
+var result = UglifyJS.minify("var b = function () {};", {fromString: true});
+```
You can also compress multiple files:
-
- var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ]);
- console.log(result.code);
+```javascript
+var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ]);
+console.log(result.code);
+```
To generate a source map:
-
- var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
- outSourceMap: "out.js.map"
- });
- console.log(result.code); // minified output
- console.log(result.map);
+```javascript
+var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
+ outSourceMap: "out.js.map"
+});
+console.log(result.code); // minified output
+console.log(result.map);
+```
Note that the source map is not saved in a file, it's just returned in
`result.map`. The value passed for `outSourceMap` is only used to set the
`file` attribute in the source map (see [the spec][sm-spec]).
You can also specify sourceRoot property to be included in source map:
-
- var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
- outSourceMap: "out.js.map",
- sourceRoot: "http://example.com/src"
- });
-
+```javascript
+var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
+ outSourceMap: "out.js.map",
+ sourceRoot: "http://example.com/src"
+});
+```
If you're compressing compiled JavaScript and have a source map for it, you
can use the `inSourceMap` argument:
-
- var result = UglifyJS.minify("compiled.js", {
- inSourceMap: "compiled.js.map",
- outSourceMap: "minified.js.map"
- });
- // same as before, it returns `code` and `map`
+```javascript
+var result = UglifyJS.minify("compiled.js", {
+ inSourceMap: "compiled.js.map",
+ outSourceMap: "minified.js.map"
+});
+// same as before, it returns `code` and `map`
+```
The `inSourceMap` is only used if you also request `outSourceMap` (it makes
no sense otherwise).
too simple for your needs.
#### The parser
-
- var toplevel_ast = UglifyJS.parse(code, options);
+```javascript
+var toplevel_ast = UglifyJS.parse(code, options);
+```
`options` is optional and if present it must be an object. The following
properties are available:
The last two options are useful when you'd like to minify multiple files and
get a single file as the output and a proper source map. Our CLI tool does
something like this:
-
- var toplevel = null;
- files.forEach(function(file){
- var code = fs.readFileSync(file);
- toplevel = UglifyJS.parse(code, {
- filename: file,
- toplevel: toplevel
- });
- });
+```javascript
+var toplevel = null;
+files.forEach(function(file){
+ var code = fs.readFileSync(file);
+ toplevel = UglifyJS.parse(code, {
+ filename: file,
+ toplevel: toplevel
+ });
+});
+```
After this, we have in `toplevel` a big AST containing all our files, with
each token having proper information about where it came from.
`with` statement etc. I will discuss this some place else, for now what's
important to know is that you need to call the following before doing
anything with the tree:
-
- toplevel.figure_out_scope()
+```javascript
+toplevel.figure_out_scope()
+```
#### Compression
Like this:
-
- var compressor = UglifyJS.Compressor(options);
- var compressed_ast = toplevel.transform(compressor);
+```javascript
+var compressor = UglifyJS.Compressor(options);
+var compressed_ast = toplevel.transform(compressor);
+```
The `options` can be missing. Available options are discussed above in
“Compressor optionsâ€. Defaults should lead to best compression in most
change the number of identifiers or their position). Optionally, you can
call a trick that helps after Gzip (counting character frequency in
non-mangleable words). Example:
-
- compressed_ast.figure_out_scope();
- compressed_ast.compute_char_frequency();
- compressed_ast.mangle_names();
+```javascript
+compressed_ast.figure_out_scope();
+compressed_ast.compute_char_frequency();
+compressed_ast.mangle_names();
+```
#### Generating output
AST nodes have a `print` method that takes an output stream. Essentially,
to generate code you do this:
-
- var stream = UglifyJS.OutputStream(options);
- compressed_ast.print(stream);
- var code = stream.toString(); // this is your minified code
+```javascript
+var stream = UglifyJS.OutputStream(options);
+compressed_ast.print(stream);
+var code = stream.toString(); // this is your minified code
+```
or, for a shortcut you can do:
-
- var code = compressed_ast.print_to_string(options);
+```javascript
+var code = compressed_ast.print_to_string(options);
+```
As usual, `options` is optional. The output stream accepts a lot of otions,
most of them documented above in section “Beautifier optionsâ€. The two
[source-map][source-map] library).
Example:
-
- var source_map = UglifyJS.SourceMap(source_map_options);
- var stream = UglifyJS.OutputStream({
- ...
- source_map: source_map
- });
- compressed_ast.print(stream);
-
- var code = stream.toString();
- var map = source_map.toString(); // json output for your source map
+```javascript
+var source_map = UglifyJS.SourceMap(source_map_options);
+var stream = UglifyJS.OutputStream({
+ ...
+ source_map: source_map
+});
+compressed_ast.print(stream);
+
+var code = stream.toString();
+var map = source_map.toString(); // json output for your source map
+```
The `source_map_options` (optional) can contain the following properties:
public / UglifyJS.git / commitdiff