Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 176 lines (134 sloc) 6.588 kB
03814fb @cowboy More docs.
authored
1 [Grunt homepage](https://github.com/cowboy/grunt) | [Documentation table of contents](toc.md)
2
3 # min (built-in task)
4 Minify files with [UglifyJS][uglify].
5
6 [uglify]: https://github.com/mishoo/UglifyJS/
7
8 ## About
9
10 This task is a [multi task](types_of_tasks.md), meaning that grunt will automatically iterate over all `min` targets if a target is not specified.
11
12 _Need some help getting started with grunt? Visit the [getting started](getting_started.md) page. And if you're creating your own tasks or helpers, be sure to check out the [types of tasks](types_of_tasks.md) page as well as the [API documentation](api.md)._
13
14 ## A Very Important Note
15 Your `grunt.js` gruntfile **must** contain this code, once and **only** once. If it doesn't, grunt won't work. For the sake of brevity, this "wrapper" code has been omitted from all examples on this page, but it needs to be there.
16
17 ```javascript
18 module.exports = function(grunt) {
19 // Your grunt code goes in here.
20 };
21 ```
22
23 ## Project configuration
24
25 This example shows a brief overview of the [config](api_config.md) properties used by the `min` task. For a more in-depth explanation, see the usage examples.
26
27 ```javascript
28 // Project configuration.
29 grunt.initConfig({
30 // Lists of files to be minified with UglifyJS.
31 min: {}
32 });
33 ```
34
35 ## Usage examples
36
37 ### Minifying individual files
38
39 In this example, running `grunt min:dist` (or `grunt min` because `min` is a [multi task](types_of_tasks.md)) will minify the specified source file, writing the output to `dist/built.min.js`.
40
41 _Note that UglifyJS strips all comments from the source, including banner comments. See the "Banner comments" example for instructions on how to add a banner to the generated source._
42
43 ```javascript
44 // Project configuration.
45 grunt.initConfig({
46 min: {
47 dist: {
48 src: ['dist/built.js'],
49 dest: 'dist/built.min.js'
50 }
51 }
52 });
53 ```
54
55 ### Minifying while concatenating files
56
57 In this example, running `grunt min:dist` (or `grunt min` because `min` is a [multi task](types_of_tasks.md)) will first concatenate the three specified source files, in order, minifying the result and writing the output to `dist/built.min.js`.
58
59 _Note that UglifyJS strips all comments from the source, including banner comments. See the "Banner comments" example for instructions on how to add a banner to the generated source._
60
61 ```javascript
62 // Project configuration.
63 grunt.initConfig({
64 min: {
65 dist: {
66 src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
67 dest: 'dist/built.min.js'
68 }
69 }
70 });
71 ```
72
73 ### Minifying and concatenating separately
74
75 Often, it's desirable to create both unminified and minified distribution files. In these cases, the [concat task](task_concat.md) should be run first, followed by the `min` task.
76
77 In this example, running `grunt concat:dist min:dist` (or `grunt concat min` because both `concat` and `min` are [multi tasks](types_of_tasks.md)) will first concatenate the three specified source files, in order, writing the output to `dist/built.js`, then will minify that file, writing the output to `dist/built.min.js`.
78
79 _Note that UglifyJS strips all comments from the source, including banner comments. See the "Banner comments" example for instructions on how to add a banner to the generated source._
80
81 ```javascript
82 // Project configuration.
83 grunt.initConfig({
84 concat: {
85 dist: {
86 src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
87 dest: 'dist/built.js'
88 }
89 },
90 min: {
91 dist: {
92 src: ['dist/built.js'],
93 dest: 'dist/built.min.js'
94 }
95 }
96 });
97 ```
98
99 ### Banner comments
100
101 In this example, running `grunt min:dist` (or `grunt min` because `min` is a [multi task](types_of_tasks.md)) will first strip any preexisting comments from the `src/project.js` file (because that's how UglifyJS works), then concatenate the result with a newly-generated banner comment, writing the output to `dist/built.js`.
102
103 This generated banner will be the contents of the `meta.banner` underscore template string interpolated with the config object. In this case, those properties are the values imported from the `package.json` file (which are available via the `pkg` config property) plus today's date.
104
105 _Note: you don't have to use an external JSON file. It's completely 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. See the [directives](helpers_directives.md) page for more information on the `<banner>` and `<json>` directives and their options._
106
107 ```javascript
108 // Project configuration.
109 grunt.initConfig({
110 pkg: '<json:package.json>',
111 meta: {
112 banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
113 '<%= grunt.template.today("m/d/yyyy") %> */'
114 },
115 min: {
116 dist: {
117 src: ['<banner>', 'dist/built.js'],
118 dest: 'dist/built.min.js'
119 }
120 }
121 });
122 ```
123
124 ### Specifying UglifyJS options
125
126 In this example, custom UglifyJS `mangle`, `squeeze` and `codegen` options are specified. The listed methods and their expected options are explained in the API section of the [UglifyJS documentation][uglify]:
127
128 * The `mangle` object is passed into the `pro.ast_mangle` method.
129 * The `squeeze` object is passed into the `pro.ast_squeeze` method.
130 * The `codegen` object is passed into the `pro.gen_code` method.
131
132 ```javascript
133 // Project configuration.
134 grunt.initConfig({
135 min: {
136 dist: {
137 src: ['dist/built.js'],
138 dest: 'dist/built.min.js'
139 }
140 },
141 uglify: {
142 mangle: {toplevel: true},
143 squeeze: {dead_code: false},
144 codegen: {quote_keys: true}
145 }
146 });
147 ```
148
149 ## Helpers
150
151 A generic `uglify` helper is available for use in any other task where file minification might be useful. For example:
152
153 ```javascript
154 var src = grunt.file.read('example.js');
155 var minSrc = grunt.helper('uglify', {mangle: {except: ['zomg']}});
156 ```
157
158 A generic `gzip` helper is available for use in any other task where gzipped text might be useful. For example:
159
160 ```javascript
161 var src = grunt.file.read('example.js');
162 var gzipSrc = grunt.helper('gzip', src);
163 grunt.log.writeln('Original size: ' + src.length + ' bytes.');
164 grunt.log.writeln('Gzipped size: ' + gzipSrc.length + ' bytes.');
165 ```
166
167 To this end, a specialized `min_max_info` helper is available for use in any other task where before-compression & after-compression sizes need to be logged. For example:
168
169 ```javascript
170 var src = grunt.file.read('example.js');
171 var minSrc = grunt.helper('uglify', {mangle: {except: ['zomg']}});
172 grunt.helper('min_max_info', minSrc, src);
173 ```
174
175 See the [min task source](../tasks/min.js) for more information.
Something went wrong with that request. Please try again.