Mad Wombat Mad Wombat - 21 days ago 6
Jade Question

How to render jade templates into HTML using brunch

Trying to use brunch for my new project. One thing I want to do is being able to write all my HTML assets in jade and have brunch render it into HTML during the build. I found the jaded-brunch, but I cannot seem to figure out how to make it do what I want. Here is my config.


exports.config =
paths:
watched: ['client']

npm:
enabled: true
packages: ['react']

plugins:
jaded:
jade:
pretty: yes
files:
javascripts:
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^(?!app)/
stylesheets:
joinTo: 'css/app.css'

templates:
joinTo: 'index.html'

Answer

This is an old question, but Brunch has been updated to handle static asset compilation a bit more gracefully.

The official jade-brunch package takes care of business with no additional config.

Placing your .jade files in your app/assets directory (or wherever you've set your static basedir to) compiles the jade files as static HTML.

If you're using includes/extends and you don't want a bunch of partial HTML files in your public directory, naming them with a preceding underscore tells Brunch to ignore those files. If your app directory looks like this:

app
  | assets
  |  | index.jade
  |  | partials
  |  |   | _header.jade

...and your index.jade includes _header:

include partials/_header

your public directory will look like this:

public
  | index.html

Works great.