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 1. in the command line, check npm is available with npm -v 1. in the command line, install jade globally sudo npm install jade -g or in your local project with sudo npm install jade 1. 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


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