# 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'] } } } }); ```