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.
|-- dist // Build will end up here
We have an
index.js file in which we will require and render our jade template.
Let’s start by setting up a simple
quote.jade Jade template.
// Require our jade template as we would require a Js file
###Let’s start by installing everything we need:
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
-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 !