Setting up a simple Brunch.io workflow from scratch
If you're like me you forget how to setup your build workflow from scratch if you haven't started a new project in several months.
Here is a breakdown of how I setup Brunch as a task runner to compile all of my Coffeescript, Stylus, Jade, etc.
If you've never used Brunch, check out their documentation at www.brunch.io
If you've read their documentation before, this short checklist might be helpful.
install npm globally before starting, but you already had that didn't you?
Run
npm initand configure your package.json scaffolding
Run
npm install --save-dev brunch because brunch is why we're doing this
Run
bower initand configure bower.json
Run
npm install --save modulenameor
npm install --save-dev modulename
for all of the dependencies you are going to need like coffeescript-brunch or uglify-js-brunch etc.
Run
bower install -S componentnameall of the components you are going to want in your vendor files, eg. bower install angular
6. setup your app folder structure
http://alxhill.com/blog/articles/brunch-coffeescript-angular/
7. carefully craft your config.coffee to tell brunch what to do
examples in the brunch documentation or in one you've used before.
8. Run
brunch buildor
brunch watchand you are on your way ^_^b
Written by Dustin Johnson
Related protips
3 Responses
Hey, thanks for the article. It's got me going on my way, but there's some stuff that's still confusing. I'm just getting started with Brunch and the likes and can't find much info on how to start a project without having to use one of their skeletons. Could you please point me in a good direction or perhaps you'd like to expand on this article and give more details regarding each step? Particularly configuring the package and bower files. Would be immensely useful!
glad that it helped @noahdecoco, I started my most recent project without a skeleton, but definitely did use one for the first few projects. What I would need to do to walk you through that is expand on step 6 and 7, because you need to setup your project folder structure where Brunch will watch and where it will output and you need to setup your config.coffee (or config.js) which is where you include all of those commands and instructions that identify the path to watch and the order to compile files etc. This is where the Brunch documentation https://github.com/brunch/brunch/blob/stable/docs/config.md comes in. Packages for NPM and Bower will configure themselves if you run npm init and bower init and then use npm install and bower install to actually pull in the dependencies. That's the beauty of those package managers, you never have to touch the config files if all the packages you are using are properly configured which 80-90% will be. Just make sure you use the --save or -S flags accordingly when running the install commands or it won't add it to the packages.json, it will just pull the files.
Superb. Finally getting it! This is so great, thanks!
