Skip to content

Grunt: Recipe Jade

Jump to bottom Edit New page
Marco Solazzi edited this page Sep 28, 2015 · 1 revision

This recipe will guide you to setup jade as the default template engine in Wok workflow.

##Installation and Requirements

Install jade via npm:

npm install jade --save-dev

##Task Configuration

  1. Edit build/grunt-tasks/render.js and replace its contents with the following boilerplate code:
var loremIpsum = require('lorem-ipsum'),
    jade = require('jade'),
    _ = require('lodash');


module.exports = function (grunt) {

    var helpers = {
        getConfig: function (prop) {
            return grunt.config.get(prop);
        },

        getAsset: function (relPath, type) {
            var www = grunt.config.get('paths.www'),
                regexp = new RegExp('^' + (www || 'www') + '\\\/'),
                assetPath = grunt.config.get('paths.' + (type || 'images')) || '';

            return assetPath.replace(regexp, '/') + relPath;
        },

        lorem: function (min, max, config) {
            var count = max ? _.random(min, max) : min,
                defaults = {
                    units: 'words',
                    count: count
                },
                conf = _.defaults(config || {}, defaults);

            return loremIpsum(conf);
        }
    };

    return {
        options: {
            data: ['<%= paths.fixtures %>/{,*/}*.json'],
            config: {
                cache: true,
                pretty: ' '
            },
            render: function (src, filepath, options) {
                var opts = _.merge({}, options.data || {}, options.config);

                opts.filename = filepath;
                opts.helpers = helpers;
                return jade.render(src, opts);
            }
        },

        dev: {
            files: [{
                expand: true,
                cwd: '<%= paths.views %>/',
                src: ['{,*/}*.jade', '!{,*/}_*.jade'],
                dest: '<%= paths.html %>',
                ext: '.html'
            }]
        },
        dist: {
            files: '<%= render.dev.files %>'
        }
    };
};

Default helpers will be available through string interpolation (eg: #{helpers.lorem(10)}). Fixtures data will work as with the default EJS templates.

  1. Convert your HTML templates to .jade templates. The following is a starting point converted from the current template:
doctype html
html.no-js(lang="")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    block title
      title
    meta(name="description" content="")
    meta(name="HandheldFriendly" content="True")
    meta(name="MobileOptimized" content="320")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    //ref:js /vendor/dist/modernizr.min.js
    script(src="/vendor/modernizr/modernizr.js")
    // endref
    <!-- media queries for supporting devices and IE mobile (since it's mobile first) -->
    <!--[if (gt IE 8) | (IEMobile)]><!-->
    // build:css /stylesheets/application.min.css
    link(rel="stylesheet" href="/stylesheets/application.css")
    // endbuild
    <!--<![endif]-->
    <!-- Fixed width style -->
    <!-- build:css /stylesheets/application-ie.min.css --><!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" href="/stylesheets/application-ie.css" type="text/css" />
    <![endif]--><!-- endbuild -->
  <!--[if lt IE 9]> <body class="lt-ie10 lt-ie9"> <![endif]-->
  <!--[if IE 9]> <body class="lt-ie10"> <![endif]-->
  <!--[if gt IE 9]><!-->
  body
    <!--<![endif]-->
    block body
      h1 Hello World!
    // build:js /javascripts/application.min.js
    script(src="/javascripts/base/plugins.js")
    script(src="/javascripts/application.js")
    // endbuild
  1. Enjoy
Add a custom footer
Add a custom sidebar
Clone this wiki locally