2c1ce9b8a277f97ed793238747801920309303ee.svn-base
6.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
[Grunt homepage](https://github.com/gruntjs/grunt) | [Documentation table of contents](toc.md)
# min (built-in task)
Minify files with [UglifyJS][uglify].
[uglify]: https://github.com/mishoo/UglifyJS/
## About
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.
_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)._
## A Very Important Note
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.
```javascript
module.exports = function(grunt) {
// Your grunt code goes in here.
};
```
## Project configuration
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.
```javascript
// Project configuration.
grunt.initConfig({
// Project metadata, used by the <banner> directive.
meta: {},
// Lists of files to be minified with UglifyJS.
min: {}
});
```
## Usage examples
### Minifying individual files
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`.
_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._
```javascript
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: ['dist/built.js'],
dest: 'dist/built.min.js'
}
}
});
```
### Minifying while concatenating files
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`.
_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._
```javascript
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.min.js'
}
}
});
```
With a slight modification, running `grunt min` will join the specified source files using `;` instead of the default newline character before minification.
```javascript
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.min.js',
separator: ';'
}
}
});
```
### Minifying and concatenating separately
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.
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`.
_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._
```javascript
// Project configuration.
grunt.initConfig({
concat: {
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.js'
}
},
min: {
dist: {
src: ['dist/built.js'],
dest: 'dist/built.min.js'
}
}
});
```
### Banner comments
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`.
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.
_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._
```javascript
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
meta: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
min: {
dist: {
src: ['<banner>', 'dist/built.js'],
dest: 'dist/built.min.js'
}
}
});
```
### Specifying UglifyJS options
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]:
* The `mangle` object is passed into the `pro.ast_mangle` method.
* The `squeeze` object is passed into the `pro.ast_squeeze` method.
* The `codegen` object is passed into the `pro.gen_code` method.
```javascript
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: ['dist/built.js'],
dest: 'dist/built.min.js'
}
},
uglify: {
mangle: {toplevel: true},
squeeze: {dead_code: false},
codegen: {quote_keys: true}
}
});
```
## Helpers
A generic `uglify` helper is available for use in any other task where file minification might be useful. For example:
```javascript
var src = grunt.file.read('example.js');
var minSrc = grunt.helper('uglify', {mangle: {except: ['zomg']}});
```
A generic `gzip` helper is available for use in any other task where gzipped text might be useful. For example:
```javascript
var src = grunt.file.read('example.js');
var gzipSrc = grunt.helper('gzip', src);
grunt.log.writeln('Original size: ' + src.length + ' bytes.');
grunt.log.writeln('Gzipped size: ' + gzipSrc.length + ' bytes.');
```
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:
```javascript
var src = grunt.file.read('example.js');
var minSrc = grunt.helper('uglify', {mangle: {except: ['zomg']}});
grunt.helper('min_max_info', minSrc, src);
```
See the [min task source](../tasks/min.js) for more information.