Skip to content

Commit b084b76

Browse files
author
Jen Weber
authored
Handle legacy content and empty pages (#40)
* remove outdated libraries * rename reference to appendix * write how to document an addon * change wording for sass * fix reference --> appendix links * fix link * clean up the existing content * move asset compilation into the advanced section * remove redundant content from dependencies * remove bower from the stylesheets * move files around * more cleanup, comment out unused pages * rename tutorial to intro-tutorial
1 parent 429f949 commit b084b76

23 files changed

+269
-773
lines changed

Diff for: guides/legacy/asset-compilation.md renamed to guides/advanced-use/asset-compilation.md

+76-59
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
<!-- Unedited copy of asset-compilation -->
1+
<!-- Cover very very basic Broccoli info. Link to Oli's tutorials. See the Ember Times Readers questions for a great writeup of what broccoli is -->
22

3-
### Raw Assets
3+
When working on an Ember app, sometimes you may want to customize how certain kinds of assets are handled. This is referred to as "asset compilation."
44

5-
* `public/assets` vs `app/styles`
5+
For information on stylesheets, please see the dedicated section, [Stylesheet compilation](../stylesheets/)
66

7-
To add images, fonts, or other assets, place them in the `public/assets` directory. For
8-
example, if you place `logo.png` in `public/assets/images`, you can reference it in
7+
## Raw Assets
8+
9+
To include images, fonts, or other assets, place them in the `public/assets` directory.
10+
11+
For example, if you place `logo.png` in `public/assets/images`, you can reference it in
912
templates with `assets/images/logo.png` or in stylesheets with
1013
`url('/assets/images/logo.png')`.
1114

1215
This functionality of Ember CLI comes from
1316
[broccoli-asset-rev](https://github.com/rickharrison/broccoli-asset-rev). Be
1417
sure to check out all the options and usage notes.
1518

16-
### JS Transpiling
19+
## JS Transpiling
1720

1821
Ember CLI automatically transpiles future JavaScript (ES6/ES2015, ES2016 and beyond) into standard ES5
1922
JavaScript that runs on every browser using [Babel JS](https://babeljs.io) with the [Ember CLI Babel](https://github.com/babel/ember-cli-babel) addon.
@@ -23,7 +26,7 @@ need to be transpiled to ES5 by **analyzing your project's browser support targe
2326
that maps to a [browserlist](https://github.com/ai/browserslist) support rule. These are defined in your
2427
`config/targets.js` file, which [Ember CLI generates](https://github.com/ember-cli/ember-cli/blob/master/blueprints/app/files/config/targets.js) like so:
2528

26-
```js
29+
```javascript
2730
/* eslint-env node */
2831
module.exports = {
2932
browsers: [
@@ -43,7 +46,7 @@ simply set any of the options found [here](https://github.com/babel/babel-preset
4346
For example, if you wanted to explicitly exclude generator function transpilation from your
4447
output, your configuration would look like this:
4548

46-
```js
49+
```javascript
4750
// ember-cli-build.js
4851

4952
/* eslint-env node */
@@ -72,18 +75,16 @@ module.exports = function(defaults) {
7275

7376
As of Version 2.13, Ember CLI uses Babel 6.X for transpilation. Ember CLI versions prior to 2.13 use Babel Babel 5.X, and you can check its documentation for a comprehensive list of [all available transformations](https://github.com/babel/babel.github.io/blob/5.0.0/docs/usage/transformers/index.md) and [options](https://github.com/babel/babel.github.io/blob/5.0.0/docs/usage/options.md).
7477

75-
76-
77-
### Source Maps
78+
## Source Maps
7879

7980
Ember CLI supports producing source maps for your concatenated and minified JS source files.
8081

8182
Source maps are configured by the EmberApp `sourcemaps` option, and
82-
are disabled in production by default. Pass `sourcemaps: {enabled: true}` to your EmberApp constructor to enable source maps for javascript. Use the `extensions` option to add other formats, such as coffeescript and CSS: `{extensions: ['js', 'css', 'coffee']}`. JS is supported out-of-the-box. CSS is not currently supported. For other source formats (Sass, Coffee, etc) refer to their addons.
83+
are disabled in production by default. Pass `sourcemaps: {enabled: true}` to your EmberApp constructor to enable source maps for JavaScript. Use the `extensions` option to add other formats, such as CSS: `{extensions: ['js', 'css']}`. JS is supported out-of-the-box. CSS is not currently supported. For other source formats, refer to their addons.
8384

84-
Default ember-cli-build.js:
85+
Default `ember-cli-build.js`:
8586

86-
```js
87+
```javascript
8788
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
8889

8990
module.exports = function(defaults) {
@@ -99,52 +100,68 @@ module.exports = function(defaults) {
99100
};
100101
```
101102

103+
## Minifying
102104

103-
### CoffeeScript
105+
Compiled css-files are minified by `broccoli-clean-css` or `broccoli-csso`,
106+
if it is installed locally. You can pass minifer-specific options to them using
107+
the `minifyCSS:options` object in your ember-cli-build. Minification is enabled by
108+
default in the production-env and can be disabled using the `minifyCSS:enabled`
109+
switch.
104110

105-
To enable [CoffeeScript](http://coffeescript.org/), you must
106-
first add [ember-cli-coffeescript](https://github.com/kimroen/ember-cli-coffeescript) to your
107-
NPM modules:
111+
Similarly, the js-files are minified with `broccoli-uglify-js` in the
112+
production-env by default. You can pass custom options to the minifier via the
113+
`minifyJS:options` object in your ember-cli-build. To enable or disable JS minification
114+
you may supply a boolean value for `minifyJS:enabled`.
108115

109-
```bash
110-
ember install ember-cli-coffeescript
111-
```
116+
For example, to disable minifying of CSS and JS, add in `ember-cli-build.js`:
112117

113-
The modified `package.json` should be checked into source control. CoffeeScript
114-
can be used in your app's source and in tests, just use the `.coffee` extension
115-
on any file. We recommend using version >= 1.16.0 of ember-cli-coffeescript to avoid the need
116-
to escape `import` and `export` statements.
118+
```js
119+
// ember-cli-build.js
120+
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
117121

118-
Note that earlier versions of the transpiler had explicit support for
119-
CoffeeScript, but that support has been removed.
122+
module.exports = function(defaults) {
123+
let app = new EmberApp(defaults, {
124+
minifyJS: {
125+
enabled: false
126+
},
127+
minifyCSS: {
128+
enabled: false
129+
}
130+
});
120131

121-
### EmberScript
132+
//...
133+
return app.toTree();
134+
};
135+
```
122136

123-
To enable [EmberScript](http://emberscript.com), you must
124-
first add [broccoli-ember-script](https://github.com/aradabaugh/broccoli-ember-script) to your
125-
NPM modules:
137+
### Exclude from minification
126138

127-
```bash
128-
npm install broccoli-ember-script --save-dev
129-
```
139+
Some files should be excluded from minification, such as copied-and-pasted third party scripts that are already minified.
130140

131-
Note that the ES6 module transpiler is not directly supported with Emberscript,
132-
to allow use of ES6 modules use the `` ` `` character to escape raw Javascript
133-
similar to the CoffeeScript example above.
141+
To exclude assets from `dist/assets` from being minified, one can pass options for
142+
[broccoli-uglify-sourcemap](https://github.com/ef4/broccoli-uglify-sourcemap) like so:
134143

135-
### Emblem
144+
```js
145+
// ember-cli-build.js
146+
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
136147

137-
For [Emblem](http://emblemjs.com/), run the following commands:
148+
module.exports = function(defaults) {
149+
let app = new EmberApp(defaults, {
150+
minifyJS: {
151+
options: {
152+
exclude: ["**/vendor.js"]
153+
}
154+
}
155+
});
138156

139-
```bash
140-
ember install ember-cli-emblem
157+
//...
158+
return app.toTree();
159+
};
141160
```
142161

143-
If you're using the older broccoli-emblem-compiler addon, you need to switch to
144-
ember-cli-emblem. The older broccoli-emblem-compiler compiles directly to JS
145-
instead of Handlebars and therefore is broken on all newer version of HTMLBars.
162+
This would exclude the resulting `vendor.js` file from being minified.
146163

147-
### Fingerprinting and CDN URLs
164+
## Fingerprinting and CDN URLs
148165

149166
Fingerprinting is done using the addon
150167
[broccoli-asset-rev](https://github.com/rickharrison/broccoli-asset-rev)
@@ -176,7 +193,7 @@ of the md5. Pass `null` to suppress the hash, which can be useful when using `pr
176193
As an example, this `ember-cli-build` will exclude any file in the fonts/169929
177194
directory as well as add a cloudfront domain to each fingerprinted asset.
178195

179-
```js
196+
```javascript
180197
// ember-cli-build.js
181198
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
182199

@@ -209,7 +226,7 @@ background: url('https://subdomain.cloudfront.net/images/foo-735d6c098496507e26b
209226
210227
You can disable fingerprinting in your `ember-cli-build.js`:
211228
212-
```js
229+
```javascript
213230
// ember-cli-build.js
214231
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
215232
@@ -228,22 +245,22 @@ module.exports = function(defaults) {
228245
Or remove the entry from your `EmberApp` and `broccoli-asset-rev`
229246
from your `package.json`.
230247
231-
### Application Configuration
248+
## Application Configuration
232249
233250
Application configurations from your `ember-cli-build.js` file will be stored inside a
234251
special meta tag in `dist/index.html`.
235252
236253
sample meta tag:
237254
238-
```js
255+
```javascript
239256
<meta name="user/config/environment" content="%7B%22modulePre.your.config">
240257
```
241258
242259
This meta tag is required for your ember application to function properly.
243260
If you prefer to have this tag be part of your compiled javascript files
244261
instead, you may use the `storeConfigInMeta` flag in `ember-cli-build.js`.
245262
246-
```js
263+
```javascript
247264
// ember-cli-build.js
248265
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
249266
@@ -257,7 +274,7 @@ module.exports = function(defaults) {
257274
};
258275
```
259276
260-
#### Configuring output paths
277+
### Configuring output paths
261278
262279
The compiled files are output to the following paths:
263280
@@ -298,7 +315,7 @@ The compiled files are output to the following paths:
298315
299316
To change these paths, specify the `outputPaths` config option in `ember-cli-build.js`. The default setting is shown here:
300317
301-
```js
318+
```javascript
302319
// ember-cli-build.js
303320
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
304321
@@ -328,7 +345,7 @@ You may edit any of these output paths, but make sure to update the paths specif
328345
`app.outputPaths.app.html` default it is `index.html`, and `tests/index.html`. If this is not done,
329346
your app will not be served with correct asset names.
330347
331-
```js
348+
```javascript
332349
// ember-cli-build.js
333350
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
334351
@@ -354,7 +371,7 @@ different extension.
354371
When using CSS preprocessing, only the `app/styles/app.scss` (or `.less` etc)
355372
is compiled. If you need to process multiple files, you must add another key:
356373
357-
```js
374+
```javascript
358375
// ember-cli-build.js
359376
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
360377
@@ -375,13 +392,13 @@ module.exports = function(defaults) {
375392
};
376393
```
377394
378-
#### Integration
395+
## Integration
379396
380397
When using Ember inside another project, you may want to launch Ember only when
381398
a specific route is accessed. If you're preloading the Ember javascript before
382399
you access the route, you have to disable `autoRun`:
383400
384-
```js
401+
```javascript
385402
// ember-cli-build.js
386403
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
387404
@@ -398,7 +415,7 @@ module.exports = function(defaults) {
398415
To manually run Ember:
399416
`require("app-name/app")["default"].create({/* app settings */});`
400417
401-
#### Subresource integrity
418+
## Subresource integrity
402419
403420
SRI calculation is done using the addon
404421
[ember-cli-sri](https://github.com/jonathanKingston/ember-cli-sri)
@@ -409,7 +426,7 @@ your applications. Subresource integrity is a security concept used to check
409426
JavaScript and stylesheets are loaded with the correct content when using a
410427
CDN.
411428
412-
#### Why
429+
### Why
413430
414431
The reason to add this to your application is to protect against poisoned CDNs
415432
breaking JavaScript or CSS.
@@ -420,6 +437,6 @@ breaking JavaScript or CSS.
420437
- The latest [GitHub DDoS attack](http://googleonlinesecurity.blogspot.co.uk/2015/04/a-javascript-based-ddos-attack-as-seen.html)
421438
- Protection against corrupted code on less trusted servers
422439
423-
#### Customize
440+
### Customize
424441
425442
To customize SRI generation see: [ember-cli-sri](https://github.com/jonathanKingston/ember-cli-sri)

Diff for: guides/advanced-use/asset-pipeline.md

-1
This file was deleted.

Diff for: guides/advanced-use/configurations.md

-63
This file was deleted.

Diff for: guides/advanced-use/file-layout.md

+2
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
<!-- A place to talk about the resolver (see ember-cli.com), module imports, and eventually, Module Unification when it becomes a thing -->
2+
3+
<!-- This page is not included in the table of contents and therefore not part of the build yet -->

0 commit comments

Comments
 (0)