OLD | NEW |
| (Empty) |
1 --- | |
2 title: "Assets and Transformers" | |
3 --- | |
4 | |
5 The [`pub serve`](pub-serve.html) and [`pub build`](pub-build.html) | |
6 commands use [transformers][] to prepare a package's [assets][] to be served | |
7 locally or to be deployed, respectively. | |
8 | |
9 Use the `pubspec.yaml` file to specify which transformers your package uses | |
10 and, if necessary, to configure the transformers. (See | |
11 [Specifying transformers](#specifying-transformers) for details.) For example: | |
12 | |
13 <pre> | |
14 name: myapp | |
15 dependencies: | |
16 <b>polymer: any</b> | |
17 <b>transformers: | |
18 - polymer: | |
19 entry_points: | |
20 - web/index.html | |
21 - web/index2.html</b> | |
22 </pre> | |
23 | |
24 A package's assets must be in one or more of the following directories: | |
25 `lib`, `asset`, and `web`. After transformation by `pub build`, assets are | |
26 available under a directory called `build`. Assets generated from | |
27 files in a package's `lib` directory appear under a directory named | |
28 <code>packages/<em><pkg_name></em></code>, and those from the package's | |
29 `asset` directory appear under <code>assets/<em><pkg_name></em></code>. | |
30 For details, see | |
31 [Where to put assets](#where-to-put-assets) and | |
32 [How to refer to assets](#how-to-refer-to-assets). | |
33 | |
34 ## How transformers work {#how-transformers-work} | |
35 | |
36 Here are some examples of transformers: | |
37 | |
38 * The dart2js transformer, which reads in all of the `.dart` files for a | |
39 program and compiles them to a single `.js` file. | |
40 * The polymer transformer, which converts HTML and Dart files into | |
41 optimized HTML and Dart files. | |
42 * A linter that reads in files and produces warnings but no actual file. | |
43 | |
44 Although you specify which transformers to use, you don't explicitly say | |
45 which transformers should be applied to which assets. Instead, each | |
46 transformer determines which assets it can apply itself to. For `pub serve`, | |
47 the transformers run when the dev server starts up and whenever a source | |
48 asset changes. The `pub build` command runs the transformers once and | |
49 then exits. | |
50 | |
51 As the following figure shows, source assets can pass through, untransformed, | |
52 and become generated assets. Or a source asset can be transformed, such as a | |
53 `.dart` file (along with the `.dart` files that it refers to) that is | |
54 compiled to `.js`. | |
55 | |
56 ![a figure showing source assets and generated assets; the .html, .css, and .png
files pass through, untransformed; the .dart file is transformed into a .js fil
e (and, for pub serve only, the .dart file is passed through, as well)](/img/ass
ets-and-transformers.png) | |
57 | |
58 Dart files are a special case. The `pub build` command doesn't produce `.dart` | |
59 files because browsers in the wild don't support Dart natively (yet). The `pub | |
60 serve` command, on the other hand, does generate `.dart` assets, because | |
61 you can use Dartium while you're developing your app. | |
62 | |
63 ## Specifying transformers {#specifying-transformers} | |
64 | |
65 To tell pub to apply a transformer to your package's assets, specify the | |
66 transformer, as well as the package that contains the transformer, in your | |
67 package's `pubspec.yaml` file. In the following pubspec, the bold lines | |
68 specify that this package requires the polymer transformer, which is in the | |
69 polymer package (along with the rest of Polymer.dart): | |
70 | |
71 <pre> | |
72 name: myapp | |
73 dependencies: | |
74 <b>polymer: any</b> | |
75 <b>transformers: | |
76 - polymer: | |
77 entry_points: web/index.html</b> | |
78 </pre> | |
79 | |
80 We expect more transformers to be available in the future. You can specify | |
81 multiple transformers, to run either in parallel (if they're independent of | |
82 each other) or in separate phases. To specify that transformers run in | |
83 parallel, use [<code><em>transformer_1</em>, ..., | |
84 <em>transformer_n</em></code>]. If order matters, put the transformers on | |
85 separate lines. | |
86 | |
87 For example, consider three transformers, specified as follows: | |
88 | |
89 {% highlight yaml %} | |
90 transformers: | |
91 - [t1, t2] | |
92 - t3 | |
93 {% endhighlight %} | |
94 | |
95 The `t1` and `t2` transformers run first, in parallel. The `t3` transformer | |
96 runs in a separate phase, after `t1` and `t2` are finished, and can see the | |
97 outputs of `t1` and `t2`. | |
98 | |
99 Pub implicitly appends a transformer that converts your Dart code to | |
100 JavaScript, so your code can run in any modern browser. | |
101 | |
102 ## Where to put assets {#where-to-put-assets} | |
103 | |
104 If you want a file to be an _asset_—to either be in or be used to | |
105 generate files in the built version of your package—then you need to | |
106 put it under one of the following directories: | |
107 | |
108 * `lib`: Dart libraries defining the package's public API. Visible in all | |
109 packages that use this package. | |
110 * `asset`: Other public files. Visible in all packages that use this | |
111 package. | |
112 * `web`: A web app's static content plus its main Dart file (the one that | |
113 defines `main()`). Visible _only_ to this package. | |
114 | |
115 The following picture shows how you might structure your app's source assets, | |
116 with your main Dart file under `web` and additional Dart files under `lib`. | |
117 | |
118 <pre> | |
119 <em>app</em>/ | |
120 lib/ | |
121 *.dart | |
122 packages/ | |
123 pck/ | |
124 lib/ | |
125 *.dart | |
126 *.js | |
127 asset/ | |
128 *.png | |
129 *.html | |
130 ... | |
131 web/ | |
132 <em>app</em>.dart | |
133 *.html | |
134 *.css | |
135 *.png | |
136 ... | |
137 </pre> | |
138 | |
139 After transformation, `pub build` places generated assets under a directory | |
140 named `build`, which we'll call the _build root_. The build root has two | |
141 special subdirectories: `packages` and `assets`. The dev server simulates this | |
142 hierarchy without generating files. | |
143 | |
144 The following figure shows the source assets above, plus the generated assets | |
145 produced by `pub build` if the only transformer is dart2js. In this example, | |
146 all the source files have corresponding generated files, and all the Dart | |
147 files have been compiled into a single JavaScript file. | |
148 | |
149 ![under the build directory are assets/ and packages/ directories, plus a bunch
of files derived from the web/ directory: app.dart.js, *.html, *.css, *.png, ...
](/img/input-and-output-assets.png) | |
150 | |
151 | |
152 ## How to refer to assets | |
153 | |
154 Here's how source asset locations correlate to generated asset locations, | |
155 for untransformed files: | |
156 | |
157 <table> | |
158 <tr> | |
159 <th> Source asset location </th> | |
160 <th> Generated asset location<br>(under the build root) </th> | |
161 </tr> | |
162 <tr> | |
163 <td> <code>.../<em><your_pkg></em>/web/<em><path></em></code> </td> | |
164 <td> <code>/<em><path></em></code> </td> | |
165 </tr> | |
166 <tr> | |
167 <td> <code>.../<em><pkg_name></em>/asset/<em><path></em></code> </td> | |
168 <td> <code>/assets/<em><pkg_name></em>/<em><path></em></code> </td> | |
169 </tr> | |
170 <tr> | |
171 <td> <code>.../<em><pkg_name></em>/lib/<em><path></em></code> </td> | |
172 <td> <code>/packages/<em><pkg_name></em>/<em><path></em></code> </td> | |
173 </tr> | |
174 </table> | |
175 | |
176 For example, consider a helloworld app's HTML file, which is in the | |
177 helloworld directory at `web/helloworld.html`. Running `pub build` produces a | |
178 copy at `build/helloworld.html`. In the dev server, you can get the HTML file | |
179 contents by using the URL `http://localhost:8080/helloworld.html`. | |
180 | |
181 Transformers might change any part of <em><path></em>, especially the | |
182 filename, but they can't change the directory structure above | |
183 <em><path></em>. | |
184 | |
185 [assets]: glossary.html#asset | |
186 [transformers]: glossary.html#transformer | |
OLD | NEW |