I wrote earlier about Brunch, which I have adopted recently for managing my web site projects. In that post, I wrote about switching from ASP.NET to Brunch. In this post, however, I want to lay out a few reasons why I’m using Brunch and how it’s benefiting me. I attempted to convey these points to a coworker recently, to convince him to use Brunch, but I regret that they didn’t come out as coherently at the time.
So here they are: why Brunch makes my life easier.
Build system
I did have a build system for my websites before—it was just baked into Visual Studio. I didn’t use it for much, really. In one project, I figured out how to install some nuget packages that compiled Less into CSS at runtime. This was amazing to me at the time, but it was really just the tip of the iceberg.
With Brunch, I’m now writing in Jade, CoffeeScript, and Less. I could easily switch to Stylus or Sass or another wrapper for CSS with a new plugin. Brunch automatically converts these into HTML, JavaScript, and CSS for me every time I save. Once it’s compiled, I can actually go look at the JavaScript to ensure it is correct, and debug it.
Deployment is now just a matter of copying these compiled assets. Brunch puts the entire site in a single folder after compilation. This has reduced the number of moving parts (or at least shuffled them into other areas, e.g. a REST service).
Watch Mode and Server
Brunch can watch your files and rebuild each file as it changes. I am usually using this mode while developing, since it shortens the inevitable cycle of edit-save-reload. It makes it transparent to use Jade or CoffeeScript, since I never have to worry about whether or not it is compiled.
It also has a built-in Express web server that serves the files over HTTP. This saves me the trouble to set up IIS or Tomcat on my dev boxes.
brunch watch --server
Automatic Minification
I never knew I wanted this, but it’s pretty nice. Brunch has a mode to minify Javascript and CSS, so I use that whenever I’m doing a production build. It can even recompile your files as you edit them, with minification. Of course, you could download the underlying tools and run them directly, but Brunch just has it built in and integrated.
brunch build --optimize
JavaScript/CSS Combining
This is pure gold: Brunch can combine multiple JavaScript and CSS files together into a single file, or set of files, per the configuration. I usually have the following: app.js, app.css, vendor.js, vendor.css. While the goal is to reduce the number of requests made from the browser to the server, the real benefit is that I can easily create my HTML file to load these 4 files, and then never worry about my vendor scripts again.
Need to add a new library? Just drop it in the /scripts/vendor folder and it gets loaded by your site! Don’t need it anymore? Delete it from the folder! I no longer have to deal with listing every javascript library I’m using in my HTML files. The only thing I have to do is make sure that libraries that need to load first (e.g. jQuery) are specified as such in the configuration. But for everything else, it’s add and forget, which is exactly how it should be.
I’m sure there are other amazing features and plugins that I should be using and could make the list. But these are the things that stick out to me every day because they are currently making my life easier. Even if you don’t want to use CoffeeScript or Jade templates, the built-in minification, concatenation, and web server would be compelling reasons alone to consider Brunch.