Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(140)

Side by Side Diff: app/doc/assets-and-transformers.markdown

Issue 162403002: Remove docs and point to ones on dartlang.org. (Closed) Base URL: https://github.com/dart-lang/pub-dartlang.git@master
Patch Set: Fit in 80 columns. Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « app/doc/assets-and-transformers.graffle ('k') | app/doc/dependencies.markdown » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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>&lt;pkg_name></em></code>, and those from the package's
29 `asset` directory appear under <code>assets/<em>&lt;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_&mdash;to either be in or be used to
105 generate files in the built version of your package&mdash;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>&lt;your_pkg></em>/web/<em>&lt;path></em></code> </td>
164 <td> <code>/<em>&lt;path></em></code> </td>
165 </tr>
166 <tr>
167 <td> <code>.../<em>&lt;pkg_name></em>/asset/<em>&lt;path></em></code> </td>
168 <td> <code>/assets/<em>&lt;pkg_name></em>/<em>&lt;path></em></code> </td>
169 </tr>
170 <tr>
171 <td> <code>.../<em>&lt;pkg_name></em>/lib/<em>&lt;path></em></code> </td>
172 <td> <code>/packages/<em>&lt;pkg_name></em>/<em>&lt;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>&lt;path></em>, especially the
182 filename, but they can't change the directory structure above
183 <em>&lt;path></em>.
184
185 [assets]: glossary.html#asset
186 [transformers]: glossary.html#transformer
OLDNEW
« no previous file with comments | « app/doc/assets-and-transformers.graffle ('k') | app/doc/dependencies.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698