How to set up Jade build for Sublime Text

If you love Jade (and it's hard not to fall in love with it) you might've been wondering how to set up Sublime Text to build your template files automatically. Follow these easy steps for ST configuration that will compile your files with a simple keyboard shortcut.

Install Jade

First of all, install Jade, if you haven't done so already. Open your command line and type

npm install jade --global

Make sure you won't forget the --global part. It automaticaly deploys Jade in such a way, that it will be accessible through environmental variables of your system (and thus visible by Sublime).

Add a build system for Sublime Text

Let's add a build system. Go to Tools > Build System > New Build System.... A new file will pop up. Replace the content of this file with:

{
   "cmd": ["cmd", "/c", "jade", "$file", "--out", "${file_path/myfolder/./}"],
   "working_dir": "${file_path/myfolder/./",
   "selector": "source.jade"
}

Now save this and change name of the file to your likings (I chose "Jade - full build").

How does it work?

Basically it builds Jade files from the folder "myfolder" (you can change it for whatever folder you keep your .jade files in) to the parent folder. How to check if this works?

Run it

Open your sample project. Create a new .jade file in the "myfolder" folder. Go to Tools > Build System and select build system you have just created. Press Ctrl+B on your open file. Voila! All your .jade files from selected folder are automatically compiled and deployed to your main project directory.