(Those food-related posts of mine are getting out of hand...)
I wasn't sure what to write about this week. I didn't learn that much new stuff, I didn't know what I could share with you. So I thought: "Why not try something I don't know yet and document that for a change?" Which is what I did.
I went to a popular search engine™ and typed the words "top build tools for JS in 2021" and clicked the first link I saw. Webpack? Meh. Gulp? I'm sure people still use it, but I haven't used it in years, doesn't qualify. Grunt? Same. Parcel and rollup? Yeah, used before, liked them, but not unknown enough. Brunch? Never heard of that. Perfect.
Let's get a first glance
The website looks promising:
Seeing your build tool in nightmares? Try Brunch!
Brunch lets you focus on what matters most — solving real problems instead of messing around with the glue.
Alright! I head over to the Github repository to see if that thing is still active. Last commit on Feb 18th 2021. Sounds maintained. Issue count? 143 at the time I'm writing this. Perhaps I'll run into some of those, but hey: Don't say no until you've tried it, right?
I'll try to build a small website, including Tailwind (with PostCSS) and AlpineJS.
Not getting started with "getting started"
Off we go, then. I usually don't read the entire documentation of a thing first, I want to get my hands dirty. So, let's npm init a small project and npm i a few packages, so the tool has something to actually bundle up. Namely tailwindcss and alpinejs. I also install brunch, because, well, yeah.
Aaaaand, I should've started reading the docs first. Apparently I would have needed to install brunch globally and create projects with it. I've got two options now: rm -rf the project directory and doing it from scratch or try to somehow muddle it in place. Did I mention that I like to get my hands dirty? Guess which option I opted for.
Off to the docs. Apparently, all that the init command does is cloning a repository from Github. So I can basically copy/paste a few things from there and I'm good, right? Let's do just that.
I need some additional packages:
npm i --save-dev auto-reload-brunch babel-brunch babel-preset-latest clean-css-brunch uglify-js-brunch
So far so good. npm audit tells me that there's only one low severity vulnerability in auto-reload-brunch. That shouldn't affect me much, since the auto reload stuff will not end up in a built version anyways, hopefully.
Now the project root needs a brunch-config.js file. I also copy/paste the one from that repo:
// See http://brunch.io for documentation.
exports.files = {
javascripts: {
joinTo: {
'vendor.js': /^(?!app)/, // Files that are not in `app` dir.
'app.js': /^app/
}
},
stylesheets: {joinTo: 'app.css'}
};
exports.plugins = {
babel: {presets: ['latest']}
};
Wait.
// See http://brunch.io for documentation.
Yeah, yeah, I know...
Ok, according to the skeleton I now need an app folder that contains a single JS file to start working with and a CSS file. Also an assets folder that contains an index.html. I wouldn't exactly consider HTML files assets, but hey. Maybe it does have an advantage. Copy/paste it is again. In theory, this should be enough to get the app running, right? Let's try it, shall we?
Drumroll please...
Alrighty, that looks hella promising!
Ok, the logo doesn't load, but all in all, it works. The vendor error you see was a mistake I did. A typo in the config. Let's try that reloading module:
This base setup caught me by surprise: 70-100ms for a rebuild? That's pretty darn fast! This thing looks really promising up until now.
Get some plugins in there
Most of the "oh so simple and fast" tools have some disadvantage somewhere. Some booby-trap that will kill most of its advantages. I wonder where brunch's is. Maybe it's in the plugins? Let's see. I need a PostCSS plugin anyways, otherwise I won't get Tailwind to work properly. The brunch website has a nice searchable list of plugins where I can find a postcss plugin that hasn't been touched since Dec 2019. Well, what could go wrong, right? Install, add Tailwind and see what happens.
Apparently, adding these lines to the plugins config should, in theory, work:
// ...
postcss: {
processors: [
require('tailwindcss')('./tailwind.config.js')
]
}
// ...
I also added an empty tailwind.config.js. Let's adjust the index.html file in the assets (I still don't get why it belongs there) a bit to actually use tailwind:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Brunch</title>
<link rel="stylesheet" href="/app.css">
<script src="/vendor.js"></script>
<script src="/app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<div class="container my-16 mx-auto">
<h1 class="text-4xl mb-4">
Hello, World!
</h1>
<p class="text-xl mb-4">
Lorem ipsum dolor sit amet
</p>
</div>
</body>
Reload, aaaand:
No errors, no nothing, it works. Ok, the compile time got up to 7.4s, but that's not brunch's fault! I added Tailwind into the mix. I wonder how slow I can get it by introducing Alpine as well:
import 'alpinejs'
8.2s - not too bad. Given that most of overhead is probably babel, brunch holds up to its promises of being fast. The shown compile time is still between 80 and 100ms, which is pretty darn fast.
Summary (After working with it for another 10 minutes...)
I'm pretty certain that this thing holds up to its promises. It doesn't deliver much out of the box, but the loads of plugins out there are more than enough to get a lot of stuff done pretty quickly. The configuration part is actually what I've found most impressing:
These two configs basically achieve the same outcome. The style of config reminds me of what Nuxt does with Webpack: It's more of a declarative style than an imperative one.
All in all, brunch seems to be a solid build tool that is pretty extensible with loads of plugins. I still expect to run into one of the 143 issues open on Github, but not any time soon. It's blazing fast and does auto-reloading out of the box (although it feels a bit shaky when editing HTML). I'm not sure how well adopted brunch is right now, but it seems to be maintained, so for small projects I work on alone, I might as well use brunch!
I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a ❤️ or a 🦄! I write tech articles in my free time and like to drink coffee every once in a while.
If you want to support my efforts, buy me a coffee ☕ or follow me on Twitter 🐦! You can also support me directly via Paypal!
Latest comments (2)
Hey, great post! I hadn't heard about brunch, but this was a nice introduction about it :)
I was wondering have you checked snowpack? I haven't used it much, but recently I was trying out svelte , and got to know about it. It promises to do some really cool things. ( As I said, I personally haven't tried it though.)
If you check it out, I'd like to know your thoughts on that (maybe even a blog ;) )
Thanks for the post :)
Thank you so much, glad you liked it! I've heard very little about snowpack and haven't tried it yet, so might as well give it a shot. In the worst case I've found a way that doesn't work, but that's still already new knowledge, right? :D Thank you for your suggestion, I really could write about that :)