Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 193 lines (149 sloc) 7.057 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({
31645cb @cowboy More docs.
authored
30 // Project metadata, used by the <banner> directive.
31 meta: {},
03814fb @cowboy More docs.
authored
32 // Lists of files to be minified with UglifyJS.
33 min: {}
34 });
35 ```
36
37 ## Usage examples
38
39 ### Minifying individual files
40
41 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`.
42
43 _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._
44
45 ```javascript
46 // Project configuration.
47 grunt.initConfig({
48 min: {
49 dist: {
50 src: ['dist/built.js'],
51 dest: 'dist/built.min.js'
52 }
53 }
54 });
55 ```
56
57 ### Minifying while concatenating files
58
59 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`.
60
61 _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._
62
63 ```javascript
64 // Project configuration.
65 grunt.initConfig({
66 min: {
67 dist: {
68 src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
69 dest: 'dist/built.min.js'
70 }
71 }
72 });
73 ```
74
1599f62 @cowboy Adding 'concat' helper separator option as well as 'concat' and 'min' ta...
authored
75 With a slight modification, running `grunt min` will join the specified source files using `;` instead of the default newline character before minification.
76
77 ```javascript
78 // Project configuration.
79 grunt.initConfig({
80 min: {
81 dist: {
82 src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
83 dest: 'dist/built.min.js',
84 separator: ';'
85 }
86 }
87 });
88 ```
89
03814fb @cowboy More docs.
authored
90 ### Minifying and concatenating separately
91
9905fa6 @cowboy More docs.
authored
92 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.
93
94 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`. After that, grunt will minify the newly-created file, writing the output to `dist/built.min.js`.
03814fb @cowboy More docs.
authored
95
96 _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._
97
98 ```javascript
99 // Project configuration.
100 grunt.initConfig({
101 concat: {
102 dist: {
103 src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
104 dest: 'dist/built.js'
105 }
106 },
107 min: {
108 dist: {
109 src: ['dist/built.js'],
110 dest: 'dist/built.min.js'
111 }
112 }
113 });
114 ```
115
116 ### Banner comments
117
118 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`.
119
120 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.
121
122 _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._
123
124 ```javascript
125 // Project configuration.
126 grunt.initConfig({
127 pkg: '<json:package.json>',
128 meta: {
129 banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
d0631e8 @cowboy Changing all "m/d/yyyy" formatted dates to default to the "yyyy-mm-dd" I...
authored
130 '<%= grunt.template.today("yyyy-mm-dd") %> */'
03814fb @cowboy More docs.
authored
131 },
132 min: {
133 dist: {
134 src: ['<banner>', 'dist/built.js'],
135 dest: 'dist/built.min.js'
136 }
137 }
138 });
139 ```
140
141 ### Specifying UglifyJS options
142
143 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]:
144
145 * The `mangle` object is passed into the `pro.ast_mangle` method.
146 * The `squeeze` object is passed into the `pro.ast_squeeze` method.
147 * The `codegen` object is passed into the `pro.gen_code` method.
148
149 ```javascript
150 // Project configuration.
151 grunt.initConfig({
152 min: {
153 dist: {
154 src: ['dist/built.js'],
155 dest: 'dist/built.min.js'
156 }
157 },
158 uglify: {
159 mangle: {toplevel: true},
160 squeeze: {dead_code: false},
161 codegen: {quote_keys: true}
162 }
163 });
164 ```
165
166 ## Helpers
167
168 A generic `uglify` helper is available for use in any other task where file minification might be useful. For example:
169
170 ```javascript
171 var src = grunt.file.read('example.js');
172 var minSrc = grunt.helper('uglify', {mangle: {except: ['zomg']}});
173 ```
174
175 A generic `gzip` helper is available for use in any other task where gzipped text might be useful. For example:
176
177 ```javascript
178 var src = grunt.file.read('example.js');
179 var gzipSrc = grunt.helper('gzip', src);
180 grunt.log.writeln('Original size: ' + src.length + ' bytes.');
181 grunt.log.writeln('Gzipped size: ' + gzipSrc.length + ' bytes.');
182 ```
183
184 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:
185
186 ```javascript
187 var src = grunt.file.read('example.js');
188 var minSrc = grunt.helper('uglify', {mangle: {except: ['zomg']}});
189 grunt.helper('min_max_info', minSrc, src);
190 ```
191
192 See the [min task source](../tasks/min.js) for more information.
Something went wrong with that request. Please try again.