| 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  | |
| 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  | |
| 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 |