catlogjs
Version:
Static site generator, translate human readable text format(such as markdown) into html, with a lot of other functions
194 lines (163 loc) • 4.37 kB
Markdown
# Usage examples
## Basic compression
This configuration will compress and mangle the input files using the default options.
```js
// Project configuration.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/input2.js']
}
}
}
});
```
## No mangling
Specify `mangle: false` to prevent changes to your variable and function names.
```js
// Project configuration.
grunt.initConfig({
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
```
## Reserved identifiers
You can specify identifiers to leave untouched with an `except` array in the `mangle` options.
```js
// Project configuration.
grunt.initConfig({
uglify: {
options: {
mangle: {
except: ['jQuery', 'Backbone']
}
},
my_target: {
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
```
## Source maps
Configure basic source map output by specifying a file path for the `sourceMap` option.
```js
// Project configuration.
grunt.initConfig({
uglify: {
my_target: {
options: {
sourceMap: 'path/to/source-map.js'
},
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
```
## Advanced source maps
You can specify the parameters to pass to `UglifyJS.SourceMap()` which will
allow you to configure advanced settings.
Refer to the [UglifyJS SourceMap Documentation](http://lisperator.net/uglifyjs/codegen#source-map) for more information.
```js
// Project configuration.
grunt.initConfig({
uglify: {
my_target: {
options: {
sourceMap: 'path/to/source-map.js',
sourceMapRoot: 'http://example.com/path/to/src/', // the location to find your original source
sourceMapIn: 'example/coffeescript-sourcemap.js', // input sourcemap from a previous compilation
},
files: {
'dest/output.min.js': ['src/input.js'],
},
},
},
});
```
## Beautify
Specify `beautify: true` to beautify your code for debugging/troubleshooting purposes.
Pass an object to manually configure any other output options passed directly to `UglifyJS.OutputStream()`.
See [UglifyJS Codegen documentation](http://lisperator.net/uglifyjs/codegen) for more information.
_Note that manual configuration will require you to explicitly set `beautify: true` if you want traditional, beautified output._
```js
// Project configuration.
grunt.initConfig({
uglify: {
my_target: {
options: {
beautify: true
},
files: {
'dest/output.min.js': ['src/input.js']
}
},
my_advanced_target: {
options: {
beautify: {
width: 80,
beautify: true
}
},
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
```
## Banner comments
In this example, running `grunt uglify:my_target` will prepend a banner created by interpolating the `banner` template string with the config object. Here, those properties are the values imported from the `package.json` file (which are available via the `pkg` config property) plus today's date.
_Note: you don't have to use an external JSON file. It's also valid to create the `pkg` object inline in the config. That being said, if you already have a JSON file, you might as well reference it._
```js
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
my_target: {
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
```
## Conditional compilation
You can also enable UglifyJS conditional compilation. This is commonly used to remove debug code blocks for production builds.
See [UglifyJS global definitions documentation](http://lisperator.net/uglifyjs/compress#global-defs) for more information.
```js
// Project configuration.
grunt.initConfig({
uglify: {
options: {
compress: {
global_defs: {
"DEBUG": false
},
dead_code: true
}
},
my_target: {
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
```