Include paths are relative to Brocfile, not to jade file about broccoli-jade HOT 4 CLOSED

So now I see that there has already been a big discussion around this, and that there's a PR in broccoli-filter to fix this.

That causes some conflicts with Broccoli's caching functionality though, which is why the PR hasn't been merged and this problem remains...

from broccoli-jade.

A workaround

I solved this problem with a little bit of broccoli-static-compiler and moving my index.jade file.

First I moved all jade files to a single directory. This seems to be the way you should lay out your project if you want to work with Broccoli, since you're always pointing to directories when working with trees.

As far as Jade files in my project goes, it consists of this index.jade, which includes a bunch of partials, and a few knockout component templates. I don't want to compile the partials, but I do want to compile the components. So I laid out my project (calling the jade folder views) like this:

Brocfile.js
app/
    views/
        index.jade
        partials/
            _my-partial.jade
        components/
            my-component.jade
build/

My build folder looks like this:

Brocfile.js
app/
build/
    index.html
    components/
        my-component.html

What I had to do to resolve the include path conflict was to temporarily move the views directory so that the include paths that are actually relative to the root of the tree, not to the Brocfile would be resolved correctly. I also had to remove the partials directory so that those files wouldn't be compiled (and I did that using broccoli-file-remover).

This is what my Brocfile.js ended up looking like:

"use strict";

var compileJade   = require("broccoli-jade"),
    compileStatic = require("broccoli-static-compiler"),
    exclFromTree  = require("broccoli-file-remover");

var html = exclFromTree("app/views", {
    path: "partials"
});
html = compileStatic(html, {
    srcDir: "/",
    destDir: "app/views"
});
html = compileJade(html);
html = compileStatic(html, {
    srcDir: "app/views",
    destDir: "/"
});

module.exports = html;

from broccoli-jade.

@sindresorhus I would like to leave this issue open for now, since I consider my solution kind of a hack, but I submitted a PR which makes a note of this issue in the README and links to a gist where I describe the workaround I also laid out in my precious comment.

from broccoli-jade.

This project is deprecated.

from broccoli-jade.