Brunch instructions

[dmitrykiselyov]

Brunch

• Install NodeJS
• Install Brunch npm install -g brunch
• Create a new Brunch project brunch new https://github.com/brunch/dead-simple
• Install PostCSS npm install --save LaurentTreguier/postcss-brunch
• Install Autoprefixer npm install --save autoprefixer
• Install Lost npm install --save lost
• Update brunch-config.coffee

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
      joinTo: 'app.js'
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'app.js'
  plugins:
    postcss:
      config: (postcss) ->
        postcss().
        use(require('autoprefixer')(['last 1 versions']).postcss).
        use(require('lost').postcss)

• Run brunch watch

This will watch your app/style.css file for any changes and then process it with Autoprefixer and Lost Grid (which will convert Lost Grid rules into vanilla CSS code), and output the processed CSS to public/app.css.

NOTE: postcss-brunch has issue, but with this fix is ok, but will work only with a vanilla CSS and Less.

⬆ back to top

 

[corysimmons]

Thanks. Can you add on to this with JavaScript (instead of Coffee) and Autoprefixer and have it watch a specific directory and output to a specific directory (to be more inline with the other instructions)?

[dmitrykiselyov]

But Brunch is different :smile: Config by default is coffee. Min config and all ready to go

exports.config =
  files:
    javascripts:
      joinTo: 'app.js'
    stylesheets:
      joinTo: 'app.css'

[corysimmons]

Oh is Brunch heavily Coffee friendly? :)

[corysimmons]

Want to open a PR and get some GitHub commit credit?

[dmitrykiselyov]

No :smile: Just a second, please.

[dmitrykiselyov]

Ok, instruction 100% is ready :+1:

[corysimmons]

Okay, just confirming you don't want to PR?

[dmitrykiselyov]

Ok. But tommorow. It's too late.

[teddybradford]

PR https://github.com/corysimmons/lost/pull/101 merged. This issue can be closed now.

[dacodekid]

@corysimmons, I'm completely new to Brunch (just started today), but according to Brunch's doc, you can use either 'coffeescript' or 'javascript' as your config file. Here is the closest JS to your gulp file.

exports.config = {
    paths: {
        "public": 'dist'
    },
    files: {
        stylesheets: {
            joinTo: 'css/app.css'
        }
    },
    plugins: {
        postcss: {
            config: function(postcss) {
                return postcss()
                    .use(require('autoprefixer')(['last 1 versions']))
                    .use(require('lost'));
            }
        }
    }
}

[corysimmons]

Ah alright thanks.