/
options-assets.md.hbs
87 lines (64 loc) · 1.76 KB
/
options-assets.md.hbs
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
---
title: options.assets
area: docs
section: configuration
---
## options.assets
> "Assets" directory to be used by dest files in a target.
Type: `String` (optional)
Default: `undefined`
_`options.assets` may be defined at the task- and/or target-levels._
## Overview
Oftentimes an "assets" directory is used in projects for containing the CSS, JavaScripts, images and other similar files.
Once the `assets` variable is defined in the Gruntfile, you may use the `\{{assets}}` variable anywhere in your templates and Assemble will generate a relative path from `dest` files to the specified `assets` directory.
## Example usage
Given the following task configuration in your project's Grunfile:
``` js
assemble: {
options: {
// Set the "default" assets dir at the task-level
assets: 'docs/assets'
},
docs: {
files: {
'docs/': ['src/pages/**/*.hbs']
}
},
components: {
files: {
'docs/components/': ['src/partials/**/*.hbs']
}
},
main: {
options: {
// Override the task-level assets dir
assets: 'dist/assets'
},
files: {
'dist/': ['src/pages/**/*.hbs']
}
}
// other stuff
}
```
And given the following templates:
```html
<link rel="stylesheet" href="\{{assets}}/css/bootstrap.css">
```
The output HTML will render as follows:
For the `assemble.docs` target
```html
<link rel="stylesheet" href="assets/css/bootstrap.css">
```
For the `assemble.components` target
```html
<link rel="stylesheet" href="../assets/css/bootstrap.css">
```
For the `assemble.main` target
```html
<link rel="stylesheet" href="assets/css/bootstrap.css">
```
**Note** that for `assets` to work predictably, _a slash must follow the `\{{assets}}` variable_
## More information
* [Options][]
* [variables][built-in-variables]