017 Jade

12 Oct 2012

Jade is a templating language to output html. As a newbie, this is a great way to create static html pages by including basic logic, partial views and many more. For advanced uses, jade can also be used with NodeJS and ExpressJS.

Download video: mp4

Sample code: Github

Version: 0.27.6

Similar episodes: 009 Package Managers, 007 Web Fonts

Tools used for Jade:

  1. Jade official page
  2. Jade documentation
  3. Jade Syntax Documentation

Getting started Jade

1. Install jade

  1. in the command line, check node is available with node -v
  2. in the command line, check npm is available with npm -v
  3. in the command line, install jade globally sudo npm install jade -g or in your local project with sudo npm install jade
  4. check that jade is install with the latest version with npm info jade

2. Initiate the project

  1. make an empty project folder and mkdir project && cd project && mkdir jade css img && mkdir jade/partials && touch css/style.css jade/index.jade jade.makefile to create empty folder and file structure:

    .
    ├── css
    │   └── style.css
    ├── img
    ├── index.html
    ├── jade
    │   ├── index.jade
    │   └── partials
    └── jade.makefile
    

3. Hello World in Jade

  1. create the simplest possible html file with jade. write the following in jade/index.jade

    h1 Hello World
    
  2. in the command line run jade jade/index.jade and check there's a new html file index.html created in the jade folder.

4. Continuous compilation with Jade

  1. ensure make is installed. check what is make with the command line man make. press q to exit the manual.
  2. ensure watch is installed. check watch's program path with the command line which watch.
  3. put in the following code inside jade.makefile using the [make](http://en.wikipedia.org/wiki/Make_(software):

    JADE = $(shell find jade/*.jade)
    HTML = $(patsubst jade/%.jade, %.html, $(JADE))
    
    all: $(HTML)
    
    %.html: jade/%.jade
      jade < $< --out $< --path $< --pretty > $@
    
    clean:
      rm -f $(HTML)
    
    .PHONY: clean
    
  4. in the command line, run watch make -f jade.makefile and this will automatically create the html files when a change in the jade folder is detected

More resources

  1. jade with node.js
  2. jade with express.js
  3. an introduction to jade
  4. codekit to compile jade with a user-friendly GUI
  5. haml-js - another templating language

Build Link of this Episode

The New & Improved Developer Toolbelt by Addy Osmani twitter

Credits

Thanks to the lovely game cpu wars for igniting the interest in the wonderful history of CPU!