Skip to content
This repository was archived by the owner on Apr 20, 2018. It is now read-only.

Commit 6b3c0a9

Browse files
committed
readme tweaks
1 parent fab250e commit 6b3c0a9

File tree

1 file changed

+40
-27
lines changed

1 file changed

+40
-27
lines changed

README.md

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,32 @@
33

44
> Replaces references from non-optimized scripts, stylesheets and other assets to their optimized version within a set of HTML files (or any templates/views).
55
6-
**[Maintainer wanted](https://github.com/yeoman/grunt-usemin/issues/313)**
6+
## [Maintainer wanted](https://github.com/yeoman/grunt-usemin/issues/313)
77

88
## Notice
99

1010
`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).
1111

1212
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+
1719

1820
## Getting Started
21+
1922
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:
2023

21-
```shell
22-
npm install grunt-usemin --save-dev
24+
```
25+
$ npm install grunt-usemin --save-dev
2326
```
2427

2528
[grunt]: http://gruntjs.com/
2629
[Getting Started]: http://gruntjs.com/getting-started
2730

31+
2832
## Tasks
2933

3034
`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:
4145

4246
To install these plugins, run:
4347

44-
```shell
45-
npm install grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-filerev --save-dev
48+
```
49+
$ npm install grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-filerev --save-dev
4650
```
4751

4852
**Important**: _You still need to manually install and load these dependencies_.
@@ -61,12 +65,14 @@ grunt.registerTask('build', [
6165
]);
6266
```
6367

68+
6469
## The useminPrepare task
6570

6671
`useminPrepare` task updates the grunt configuration to apply a configured transformation flow to tagged files (i.e. blocks).
6772
By default the transformation flow is composed of `concat` and `uglify` for JS files, but it can be configured.
6873

6974
### Blocks
75+
7076
Blocks are expressed as:
7177

7278
```html
@@ -108,6 +114,7 @@ Let's have an example, using the default flow (we're just going to look at the s
108114
<script src="js/views/thing-view.js"></script>
109115
<!-- endbuild -->
110116
```
117+
111118
The produced configuration will look like:
112119

113120
```js
@@ -148,7 +155,7 @@ One doesn't need to specify a concat/uglify/cssmin configuration anymore.
148155

149156
It uses only one target: `html`, with a list of the concerned files. For example, in your `Gruntfile.js`:
150157

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.
152159
If you need to change the 'root' dir, use the `root` option (see below).
153160

154161
```js
@@ -174,28 +181,28 @@ useminPrepare: {
174181

175182
### dest
176183

177-
Type: 'string'
184+
Type: `string`
178185
Default: `nil`
179186

180187
Base directory where the transformed files should be output.
181188

182189
### staging
183190

184-
Type: 'string'
191+
Type: `string`
185192
Default: `.tmp`
186193

187194
Base directory where the temporary files should be output (e.g. concatenated files).
188195

189196
### root
190197

191-
Type: 'string' or 'Array'
192-
Default: `nil`
198+
Type: `string`, `array`
199+
Default: `null`
193200

194201
The root directory from which your files will be resolved.
195202

196203
### flow
197204

198-
Type: 'object'
205+
Type: `object`
199206
Default: `{ steps: { js: ['concat', 'uglify'], css: ['concat', 'cssmin'] }, post: {} }`
200207

201208
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
280287
It takes 2 arguments ( a `context` and the treated `block`), and returns a configuration object.
281288

282289
###### `context`
290+
283291
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.
284292
Attributes:
285293

@@ -291,6 +299,7 @@ Attributes:
291299
* `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`)
292300

293301
###### `block`
302+
294303
The actual looked-at block, parsed and put in a structure.
295304

296305
Example:
@@ -365,12 +374,13 @@ By default `usemin` will look under `dist/html` for revved versions of `styles/m
365374

366375
#### assetsDirs
367376

368-
Type: 'Array'
377+
Type: `array`
369378
Default: Single item array set to the value of the directory where the currently looked at file is.
370379

371380
List of directories where we should start to look for *revved version* of the assets referenced in the currently looked at file.
372381

373382
Example:
383+
374384
```js
375385
usemin: {
376386
html: 'build/index.html',
@@ -389,11 +399,11 @@ In others words, given the configuration above, `usemin` will search for the exi
389399

390400
#### patterns
391401

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`.
394406

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`.
397407
By specifying something along the lines of:
398408

399409
```js
@@ -451,8 +461,8 @@ usemin: {
451461

452462
#### revmap
453463

454-
Type: 'String'
455-
Default: Empty
464+
Type: `string`
465+
Default: `''`
456466

457467
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
458468
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
462472
"foo.png": "foo.1234.png"
463473
}
464474
```
475+
465476
This map will be used instead of looking for file on the disk.
466477

467478
## On directories
479+
468480
The main difference to be kept in mind, regarding directories and tasks, is that for `useminPrepare`, the directories needs to indicate the input,
469481
transient and output path needed to output the right configuration for the processors pipeline,
470482
whereas in the case of `usemin` it only reflects the output paths, as all the needed assets should have
471483
been output to the destination dir (either transformed or just copied)
472484

473485
### useminPrepare
486+
474487
`useminPrepare` is trying to prepare the right configuration for the pipeline of actions that are going to be
475488
applied on the blocks (for example concatenation and uglify-cation). As such it needs to have the input
476489
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
480493
generally through `root` option).
481494
Relative files references are also looked at from location of the examined file, unless stated otherwise.
482495

483-
484496
### usemin
497+
485498
`usemin` target replaces references to images, scripts, css, ... in the furnished files (html, css, ...).
486499
These references may be either absolute (i.e. `/images/foo.png`) or relative (i.e. `image/foo.png`
487500
or `../images/foo.png`).
@@ -539,22 +552,21 @@ This will, on the fly, generate the following configuration:
539552

540553
```js
541554
{
542-
concat:
543-
{
555+
concat: {
544556
'.tmp/concat/assets/js/optimized.js': [
545557
'app/assets/js/foo.js',
546558
'app/assets/js/bar.js'
547559
]
548560
},
549561

550-
uglify:
551-
{
562+
uglify: {
552563
'dist/assets/js/optimized.js': ['.tmp/concat/assets/js/optimized.js']
553564
}
554565
}
555566
```
556567

557568
### HTML file and asset files in sibling directories
569+
558570
```
559571
app
560572
|
@@ -612,6 +624,7 @@ This will, on the fly, generate the following configuration:
612624
}
613625
```
614626

627+
615628
## License
616629

617630
[BSD license](http://opensource.org/licenses/bsd-license.php) and copyright Google

0 commit comments

Comments
 (0)