CODEWITHSUNDEEP
templatesnode.jsmakefilepug
Kyle Finley
Kyle Finley

Reputation: 12002

Jade template as a preprocessor for html

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

Upvotes: 10

Views: 4014

Answers (4)

simon04
simon04

Reputation: 3312

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

find -name '*.jade' | entr make

Upvotes: 0

maackle
maackle

Reputation: 2134

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.

Upvotes: 2

mihai
mihai

Reputation: 38573

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!

Upvotes: 4

Florian Margaine
Florian Margaine

Reputation: 60825

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.

Upvotes: 0

Related Questions