You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 20, 2018. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+40-27Lines changed: 40 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,28 +3,32 @@
3
3
4
4
> Replaces references from non-optimized scripts, stylesheets and other assets to their optimized version within a set of HTML files (or any templates/views).
`grunt-usemin` is going under some major developments to tackle the long list of issues. As they might break with `master` they are merged into [dev branch](https://github.com/yeoman/grunt-usemin/tree/dev).
11
11
12
12
Currently what has been merged:
13
-
* support for a `resolveSource` function option
14
-
* warning for any missing files instead of silent errors
15
-
* migrate from regexps to HTML parser
16
-
* (current) support for multiple target
13
+
14
+
- Support for a `resolveSource` function option
15
+
- Warning for any missing files instead of silent errors
16
+
- Migrate from regex to HTML parser
17
+
- Support for multiple target *(current)*
18
+
17
19
18
20
## Getting Started
21
+
19
22
If you haven't used [grunt][] before, be sure to check out the [Getting Started][] guide, as it explains how to create a [gruntfile][Getting Started] as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:
`usemin` replaces the references of scripts, stylesheets and other assets within HTML files dynamically with optimized versions of them. To do this `usemin` exports 2 built-in tasks called `useminPrepare` and `usemin` and utilizes a couple of other Grunt plugins for the optimization process. `usemin` does this by generating the subtasks for these Grunt plugins dynamically.
@@ -41,8 +45,8 @@ Grunt plugins which `usemin` can use to optimize files:
**Important**: _You still need to manually install and load these dependencies_.
@@ -61,12 +65,14 @@ grunt.registerTask('build', [
61
65
]);
62
66
```
63
67
68
+
64
69
## The useminPrepare task
65
70
66
71
`useminPrepare` task updates the grunt configuration to apply a configured transformation flow to tagged files (i.e. blocks).
67
72
By default the transformation flow is composed of `concat` and `uglify` for JS files, but it can be configured.
68
73
69
74
### Blocks
75
+
70
76
Blocks are expressed as:
71
77
72
78
```html
@@ -108,6 +114,7 @@ Let's have an example, using the default flow (we're just going to look at the s
108
114
<scriptsrc="js/views/thing-view.js"></script>
109
115
<!-- endbuild -->
110
116
```
117
+
111
118
The produced configuration will look like:
112
119
113
120
```js
@@ -148,7 +155,7 @@ One doesn't need to specify a concat/uglify/cssmin configuration anymore.
148
155
149
156
It uses only one target: `html`, with a list of the concerned files. For example, in your `Gruntfile.js`:
150
157
151
-
By default, it will consider the directory where the looked-at file is located as the 'root' filesystem. Each relative path (for example to a javascript file) will be resolved from this path. Same goes for the absolute ones.
158
+
By default, it will consider the directory where the looked-at file is located as the 'root' filesystem. Each relative path (for example to a JavaScript file) will be resolved from this path. Same goes for the absolute ones.
152
159
If you need to change the 'root' dir, use the `root` option (see below).
153
160
154
161
```js
@@ -174,28 +181,28 @@ useminPrepare: {
174
181
175
182
### dest
176
183
177
-
Type: 'string'
184
+
Type: `string`
178
185
Default: `nil`
179
186
180
187
Base directory where the transformed files should be output.
181
188
182
189
### staging
183
190
184
-
Type: 'string'
191
+
Type: `string`
185
192
Default: `.tmp`
186
193
187
194
Base directory where the temporary files should be output (e.g. concatenated files).
188
195
189
196
### root
190
197
191
-
Type: 'string' or 'Array'
192
-
Default: `nil`
198
+
Type: `string`, `array`
199
+
Default: `null`
193
200
194
201
The root directory from which your files will be resolved.
This allow you to configure the workflow, either on a per-target basis, or for all the targets.
@@ -280,6 +287,7 @@ The `createConfig` function is responsible for creating (or updating) the config
280
287
It takes 2 arguments ( a `context` and the treated `block`), and returns a configuration object.
281
288
282
289
###### `context`
290
+
283
291
The `context` object represent the current context the step/post-processor is running in. As the step/post-processor is a step of a flow, it must be listed in the input files and directory it must write a configuration for, potentially the already existing configuration. It must also indicate to the other steps/post-processor which files it will output in which directory. All this information is held by the `context` object.
284
292
Attributes:
285
293
@@ -291,6 +299,7 @@ Attributes:
291
299
*`options`: options of the `Gruntfile.js` for this step (e.g. if the step is named `foo`, holds configuration of the `Gruntfile.js` associated to the attribute `foo`)
292
300
293
301
###### `block`
302
+
294
303
The actual looked-at block, parsed and put in a structure.
295
304
296
305
Example:
@@ -365,12 +374,13 @@ By default `usemin` will look under `dist/html` for revved versions of `styles/m
365
374
366
375
#### assetsDirs
367
376
368
-
Type: 'Array'
377
+
Type: `array`
369
378
Default: Single item array set to the value of the directory where the currently looked at file is.
370
379
371
380
List of directories where we should start to look for *revved version* of the assets referenced in the currently looked at file.
372
381
373
382
Example:
383
+
374
384
```js
375
385
usemin: {
376
386
html:'build/index.html',
@@ -389,11 +399,11 @@ In others words, given the configuration above, `usemin` will search for the exi
389
399
390
400
#### patterns
391
401
392
-
Type: 'Object'
393
-
Default: Empty
402
+
Type: `object`
403
+
Default: `{}`
404
+
405
+
Allows for user defined pattern to replace reference to files. For example, let's suppose that you want to replace all references to `'image.png'` in your Javascript files by the revved version of `image.png` found below the directory `images`.
394
406
395
-
Allows for user defined pattern to replace reference to files. For example, let's suppose that you want to replace
396
-
all references to `'image.png'` in your Javascript files by the revved version of `image.png` found below the directory `images`.
397
407
By specifying something along the lines of:
398
408
399
409
```js
@@ -451,8 +461,8 @@ usemin: {
451
461
452
462
#### revmap
453
463
454
-
Type: 'String'
455
-
Default: Empty
464
+
Type: `string`
465
+
Default: `''`
456
466
457
467
Indicate the location of a map file, as produced by `grunt-filerev` for example. This map file is a simple JSON file, holding an object
458
468
which attributes are the original file and associated value is the transformed file. For example:
@@ -462,15 +472,18 @@ which attributes are the original file and associated value is the transformed f
462
472
"foo.png":"foo.1234.png"
463
473
}
464
474
```
475
+
465
476
This map will be used instead of looking for file on the disk.
466
477
467
478
## On directories
479
+
468
480
The main difference to be kept in mind, regarding directories and tasks, is that for `useminPrepare`, the directories needs to indicate the input,
469
481
transient and output path needed to output the right configuration for the processors pipeline,
470
482
whereas in the case of `usemin` it only reflects the output paths, as all the needed assets should have
471
483
been output to the destination dir (either transformed or just copied)
472
484
473
485
### useminPrepare
486
+
474
487
`useminPrepare` is trying to prepare the right configuration for the pipeline of actions that are going to be
475
488
applied on the blocks (for example concatenation and uglify-cation). As such it needs to have the input
476
489
directory, temporary directories (staging) and destination directory.
@@ -480,8 +493,8 @@ to the directory where the html/css file examined is located (can be overridden
480
493
generally through `root` option).
481
494
Relative files references are also looked at from location of the examined file, unless stated otherwise.
482
495
483
-
484
496
### usemin
497
+
485
498
`usemin` target replaces references to images, scripts, css, ... in the furnished files (html, css, ...).
486
499
These references may be either absolute (i.e. `/images/foo.png`) or relative (i.e. `image/foo.png`
487
500
or `../images/foo.png`).
@@ -539,22 +552,21 @@ This will, on the fly, generate the following configuration:
0 commit comments