Jade template as a preprocessor for html

Question

I will not be using node.js in production, but I like jades syntax, so I would like to compile jade template into html when developing.

Given this file structure:

app/
  jade_templates /
    index.jade
    subfolder /
      subpage.jade
  html_templates /
    index.html
    subfolder /
      subpage.html

I would like to have a script that watches the jade_templates directory and compiles the corresponding html template to html_templates any time a change has been made.

How can this be accomplished?

Thank you.

EDIT The Jade README has this Sample Makefile, but I'm not sure how to adapt this to my needs.

JADE = $(shell find pages/*.jade)
HTML = $(JADE:.jade=.html)

all: $(HTML)

%.html: %.jade
    jade < $< --path $< > $@

clean:
    rm -f $(HTML)

.PHONY: clean

Koal

Answer 1

Since I had the need for a similar script I took the time and tried out a few tools and shell scripts out there (like forever) but couldn't find anything satisfactory.

So I went on to implement this solution. You can find it on github:

https://github.com/mihaifm/simplemon

See if it works for you. I added an example for jade as well.

Cheers!

Electioneer

thank you for the response. Would you mind adding the command that would render the html template based on my requirement. I have simplemon install, but it doesn't seem to be updating on file changes. I can't figure out what I'm doing wrong. Thank you. – Koal

cd app then simplemon -O jade html_templates jade_templates. What OS are you using, I tested this on linux and win. – Electioneer

I'm on OS X. With your command I get the error execvp(): No such file or directory With the command simplemon jade -O html_templates jade_templates the templates compile when the programs starts, but not on changes. – Koal

sorry I mistakenly placed the -O. Ok I'll have to see what's going on with OSX, might be an issue with the fs.watch method of node.js. – Electioneer

Thanks mihai, please let me know if there's anything I can do to help debug. – Koal

Answer 2

I use Grunt for this. Using grunt-contrib-jade and grunt-contrib-watch you can fairly easily set up a grunt task to watch a directory for jade files and compile them to another directory when they change.

Grunt has a bit of a learning curve but it's super handy and allows me to feasibly develop in Jade (and Sass, and Coffeescript!) whenever I want -- if you're at all interested in this approach leave a comment and I'll add a sample Gruntfile that would do what you want.

Mencher

It would be great to see a sample of this. Thanks! – Socalled

Answer 3

I'd suggest you write a little node app to do this.

The code would look like this:

// Watch a directory for files changes (such as here: https://github.com/Raynos/fyp/blob/master/src/build.js)
// Get the Jade code from the changed file
// Compile it
// Writes the output to a file with the same name in another directory

I said "node app" but it should be whatever you're comfortable with.

Balsamiferous

I assumed that was the process, but I wasn't sure how to code it. Thank you for the link to fyp. – Koal

Answer 4

You could make use of entr, which executes a program if one of the specified files change:

find -name '*.jade' | entr make

Testy