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 | mkdir -p public/images |
In app/styles/app.css
put:
1 | html { |
In app/app.js
put:
1 | alert("Eat your greens"); |
In app/index.html
put:
1 | <html> |
In public/images
add this image, named broccoli-logo.png
1 | // Brocfile.js |
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 | assets/app.js |
Completed Branch: 03-merge-trees
Next: 04-sass-preprocessing