Last Updated: February 25, 2016
·
4.095K
· dustinrjo

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 init

and configure your package.json scaffolding

Run

npm install --save-dev brunch 

because brunch is why we're doing this

Run

bower init

and configure bower.json

Run

npm install --save modulename

or
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 componentname

all 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 build

or

brunch watch

and you are on your way ^_^b

3 Responses
Add your response

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!

over 1 year ago ·

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.

over 1 year ago ·

Superb. Finally getting it! This is so great, thanks!

over 1 year ago ·