If you want to use JavaScript on a website and avoid the minefield of tools out there, Brunch is a great tool to consider.
Recently, I had the chance to start a greenfield project. Because nothing was set, I ran into the bane of the JavaScript ecosystem: the JavaScript ecosystem. Specifically, I had to decide what tools this project would use.
Not so long ago,
a simple project could get away with hacking some code
into a single .js
file,
include it in a script
tag,
and be done with it.
Modern JavaScript development is not nearly so straight foward.
With the rise of ES6
and the modularization of libraries
via npm
,
building out the final file can be fairly complicated.
Knowing this, I looked at the popular options. Broccoli.js, Brunch, Grunt, Gulp, and webpack to name a few.
So, let me jump to the conclusion:
Brunch focuses on being a build tool and nothing else. This greatly simplifies using it and makes it a strong option.
The other tools that I examined have their place, but here are some reasons why I like Brunch.
1. Very little setup
Brunch follows a convention over configuration style. This means that there isn’t much to put into the configuration file. Play by the rules (of which there are few) and it will typically do The Right Thing™.
2. Use ES6 with almost no thought
If you want to use the latest JavaScript features,
you have to deal with a transpiler like
Babel.
ES6 is only a single plugin away (babel-brunch
)
from automatically working with Brunch.
3. Three commands in total. Yes, three!
$ brunch new
$ brunch build
$ brunch watch
That’s it.
brunch new
will help you bootstrap a new project.
Because of the use of conventions,
this is the recommended way to get started.
The command will set up all the structure you need
to get creating.
With the help of some project templates called skeletons,
you can even get initial plugin configuration out of the way.
Try it with:
$ brunch new -s es6
brunch build
and brunch watch
will both do the work of building your JavaScript payload.
The two are related with one big distinction:
the latter will watch the files in your project
and incrementally update the output
whenever something changes.
Watching your project for changes is a powerful paradigm
used by many of the tool chains out there,
and it’s nice that Brunch also has that feature.
I think I can read your mind:
Oh great, some new fangled JavaScript tool. This must be the new hotness, right? I bet it’s another flash in the pan.
This is the interesting part to me. Brunch is not new. Not even close. The project started in 2011. That even predates Grunt. I think Brunch is a tool that deserves more attention because it solves the JavaScript build problem in a very simple way. Check it out.