03-Merge Trees

The first examples are fairly contrived and not that useful. We'll want to be able to work with multiple trees, and ultimately have them written to our target directory.

Introducing, broccoli-merge-trees

1
yarn add --dev broccoli-merge-trees@^3.0.0

Now let's add a some directories and content so we can ship unprocessed assets like images, css and js:

1
2
3
mkdir -p public/images
mkdir -p app/styles
touch app/styles/app.css app/app.js

In app/styles/app.css put:

1
2
3
html {
  background: palegreen;
}

In app/app.js put:

1
alert("Eat your greens");

In app/index.html put:

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html><html>
<head>
    <title>Broccoli.js Tutorial</title>
    <link rel="stylesheet" href="/assets/app.css" />
</head>
<body>
Eat your greens!
<br />
<img src="/images/broccoli-logo.png" />
<script src="/assets/app.js"></script>
</body>
</html>

In public/images add this image, named broccoli-logo.png

logo

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
// Brocfile.js
const funnel = require("broccoli-funnel");
const merge = require("broccoli-merge-trees");

const appRoot = "app";

// Copy HTML file from app root to destination
const html = funnel(appRoot, {
  files: ["index.html"],
  annotation: "Index file",
});

// Copy JS file into assets
const js = funnel(appRoot, {
  files: ["app.js"],
  destDir: "/assets",
  annotation: "JS files",
});

// Copy CSS file into assets
const css = funnel(appRoot, {
  srcDir: "styles",
  files: ["app.css"],
  destDir: "/assets",
  annotation: "CSS files",
});

// Copy public files into destination
const public = funnel('public', {
  annotation: "Public files",
});

module.exports = merge([html, js, css, public], {annotation: "Final output"});

Again, pretty simple. We've added 2 filters for our js and css, that's taken an input node appRoot, filtered out all files except the app.js and app.css and will copy the files to the destDir of /assets within the target directory.

We've also added a public filter, that merely copies the contents of /public and added it to the output directory.

Then, we take all these nodes, and merge them together, so all files end up in the target directory.

Now run yarn serve, refresh your browser and you should get an alert message saying Eat your greens with a nice pale green background.

Running yarn build the target dist directory should contain:

1
2
3
4
assets/app.js
assets/app.css
images/broccoli-logo.png
index.html

Completed Branch: 03-merge-trees

Next: 04-sass-preprocessing