Bundle jade templates with browserify transform

#Node #Browserify #Jade

Browserify transforms can be used to load non Javascript files using the Common JS syntax. You could for example load CoffeeScript, TypeScript or compile ES6 to ES5 when packaging your JavaScript.

In this example we will look at how to require a jade template directly inside our JS code and have browserify bundle everything up nicely.

1) Project setup

|-- dist // Build will end up here
|-- src // All source code is inside this folder
    |-- templates
        |-- quote.jade // Our jade template
    |-- js
        |-- index.js // Our main JavaScript file
|-- package.json

We have an index.js file in which we will require and render our jade template.

2) Jade template

Let’s start by setting up a simple quote.jade Jade template.

h3 #{quote}
span - #{author}

3) Javascript

We are now ready to include our template in our Javascript. Require your jade template the same way as you would for a JS file but add the file extension.

// Require our jade template as we would require a Js file
var quoteTemplate = require('../templates/quote.jade');

// Render the template
var output = quoteTemplate({
    quote: "Be yourself; everyone else is already taken.",
    author: "Oscar Wilde"
});

console.log(output);

4) Bundle up

###Let’s start by installing everything we need:

• Install browserify globally

• Install jadeify, our jade browserify transform:

npm install jadeify --save

• You will also need to install jade locally even if you already have it installed globally. This is because browserify needs to access some of the jade code to include it in the output file.

npm install jade --save

###We are now ready to create our package:

To specify a transform when launching browserify, use -transform or -t followed by the plugin name.

So in our case:

browserify -t jadeify "src/js/index.js" -o "dist/bundle.js"

Your code is all packaged in one Js file. Include the bundle.js file in a simple HTML page and check the console. You should see:

<h3> Be yourself; everyone else is already taken.</h3><span>- Oscar Wilde</span>

Have fun with browserify transforms !

#Node #Browserify #Jade