How To: Setup Jade Template Engine

In this tutorial I’m going to step you through how to setup the awesome Jade Template Engine using the build system gulp. But first, a brief introduction on why someone would want to use Jade.

Why Bother?

Jade is a powerful template engine with nice, minimalist syntax. Using a template engine instead of your standard HTML is a great way to introduce organization and consistency to your code. The structure gained from a template engine, like Jade, speeds up debugging, allows for rapid development, and provides a good separation between logic and markup.

Why Jade?

When looking through all of the possible template engines (and there are lots), Jade really stuck out to me because of the way it redefines creating HTML syntax. Of course, Jade’s style of syntax may not be for everyone, and it does introduce a new, albeit small, learning curve for development. However, I find writing Jade to be quicker and therefore more productive than dealing with the more verbose HTML directly. Additionally, Jade supports template inheritance, which is an incredibly useful feature. If you’re willing to learn a little more syntax to speed up your development, allow me to introduce Jade.

Requirements

  1. Node Package Manager (npm)
  2. gulp
  3. a little familiarity with the command line
  4. a good text editor (my preference is atom)

Setting Up npm

Let’s begin by grabbing npm, the package manager for node.js. Head on over to nodejs.org and download the node.js platform, which comes with npm baked in. To verify that npm installed properly, run the command “npm –version” in your command line without the quotes:

PS C:\User> npm --version

This command should output your current version of npm, if it installed correctly. In my case, it displayed 2.4.1.

Now that we have npm, we will install gulp, our build system.

Installing Gulp

Setting up gulp is made easy with npm. To install it, all we need to do is run the command “npm install gulp -g”:

PS C:\User> npm install gulp -g

This command will use npm to install gulp globally (hence the -g). Now that that’s done, we can start working on setting up the directory where we will manipulate our files.

File Structure

With everything installed (except for package dependencies that we’ll get to later), let’s setup the directory where our project will be placed. Run the following commands to create our project.

PS C:\User> mkdir jade_example
PS C:\User> cd jade_example
PS C:\User\jade_example> mkdir src
PS C:\User\jade_example> cd src
PS C:\User\jade_example\src> mkdir templates
PS C:\User\jade_example\src> cd ..

Still within the jade_example directory, we need to create a package.json file to tell npm about the packages we will use in the project (jade and gulp). Create the file package.json. Here is all we will put in the file:

{

}

With that done, we’ll now create our jade file that we will use to create our HTML. Navigate to your templates directory and create the file index.jade with the following inside.

doctype html
    html
    head
    body
        p Hello World!

With all of our files set up, lets begin using gulp!

Using Gulp

Navigate to the root of our project directory jade_example and run the following npm commands to setup gulp and jade:

npm install gulp --save-dev
npm install gulp-jade --save-dev

You will see a couple of warnings that will say No description or No repository field, but we will ignore those because they don’t affect this project. These two commands simply setup gulp in our root project, as well as the dependency that gulp needs to interpret jade. Additionally if you look inside your root folder, you’ll notice the addition of a new folder, node_modules, that contains the subfolders gulp and gulp-jade. Our package.json file that we originally left virtually blank has also been filled in with the following:

{
    "devDependencies": {
        "gulp": "^3.8.11",
        "gulp-jade": "^1.0.0:
    }
}

This just lets us know what packages we have installed for this project.

We have just one more thing to do before we can convert our index.jade into index.html. In your root directory, jade_example, create the file gulpfile.js. This is where we are going to assign the commands that gulp will use to interpret our jade file. Put the following withing gulpfile.js:

var gulp = require('gulp'),
    jade = require('gulp-jade');

// run this task by typing in gulp jade in CLI
gulp.task('jade', function() {
    return gulp.src('src/templates/**/*.jade')
        .pipe(jade()) // pip to jade plugin
        .pipe(gulp.dest('builds/development')); // tell gulp our output folder
});

With gulpfile.js set up, all we need to do is run the command gulp jade in our root directory and voila! You will see a folder builds appear. If you explore builds and navigate to builds/development/, you will see our index.html file. Each time you make a change to the file index.jade, navigate to your root directory and run the same command, gulp jade, and your index.html will be updated. To ease this process, we will setup watching in another tutorial. For now, you have successfully setup gulp and jade!

Full source and more

Advertisements
How To: Setup Jade Template Engine

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s