grunt-jade-plugin

Compile Jade templates to one JavaScript file (normal or AMD).

grunt-jade-plugin

Compile Jade templates to one JavaScript file (normal or AMD).

Note: This plugin requires Grunt ~0.4.0. If you're still using grunt v.0.3.x please use 0.3.x branch of this plugin.

npm install grunt-jade-plugin --save-dev

If you're still using Grunt v.0.3.x:

npm install grunt-jade-plugin@~0.3.0 --save-dev

Then it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-jade-plugin');
jade2js: {
  compile: {
    options: {
      amd: true,
 
      amdDependences: {
        'jade': 'jade',
        'underscore': '_'
      },
    },
 
    files: {
      'templates.js': ['temlates/user.jade', 'templates/account.jade']
    }
  }
}

The result templates.js file will content:

define(["jade", "underscore"], function(jade_) {
  // Compiled templates will be here. 
}

You can use your compiled templates like this:

define(["templates"], function(templates) {
  var data = {name: 'John', age: 28};
  var htmlResult = templates.user(data);
  var htmlResult = templates.account(data);
}
jade2js: {
  compile: {
    options: {
      namespace: 'MyApp.Templates'
    },
    files: {
      'templates.js': 'temlates/*.jade'
    }
  }
}

The result templates.js file will content:

this['MyApp'] = this['MyApp'] || {};
this['MyApp']['Templates'] = this['MyApp']['Templates'] || {};
 
// Template function 
this['MyApp']['Templates']['user'] = function() {};

You can use your compiled templates like this:

var data = {name: 'John', age: 28};
var htmlResult = MyApp.Templates.user(data);

Define what files this task will process. For more info about files object please read Grunt docs.

Examples:

files: {
  'templates1.js': 'source/*.jade', // includes files from source dir only 
  'templates2.js': 'source/**/*.jade', // includes files from source dir and all its subdirs 
  'templates3.js': ['path/to/sources/file.jade', 'path/to/more/other.jade']
}

This controls how this task operates and should contain key:value pairs, see options below.

All options and defaults:

options: {
  amd: false,
  amdDependences: {},
  includeRuntime: true,
  injectBefore: '',
  namespace: 'Templates',
  compileDebug: false,
  filters: [],
  processNamefunction(filename) { return filename.split('/').pop().split('.')[0]; }
}

This option accepts a function which takes the template filepath and returns a string which will be used as the key for the precompiled template object.

By default processName removes the template file path and an extension like this:

// Before: 
Templates['templates/user.jade']
 
// After: 
Templates['user']
 
// So you can access your template function like this: 
Templates.user

You can change the default behaviour like this:

files: {
  'templates.js': ['temlates/user.jade', 'templates/account.jade']
},
 
options: {
  processNamefunction(filename) {
    return filename
  }
}

Resutl:

Templates['templates/user.jade']
Templates['templates/account.jade']
 

Gruntfile.js:

options: {
  filters: {
    somefunction(block) {},
    anotherfunction(block) {}
  }
}

Determine if Jade's runtime.js file will be included into the result JS file. By default it will be included.

Note that you have to use the runtime file anyway. So if you prefer to keep it separately, you can download it from the official repository.

Determine if preprocessed template functions will be wrapped in Require.js define function (default is false).

define([], function() {
  // ... 
});
amdDependences: {
  'helpers': 'helpers',
  'underscore': '_'
},

Result:

define(["helpers", "underscore"], function(helpers_) {
  // Compiled templates will be here. 
}

The namespace in which the precompiled templates will be assigned (default is 'Templates'). Use dot notation (e.g. App.Templates) for nested namespaces.

Example:

options: {
  namespace: 'MyApp.Templates'
}

Result:

this['MyApp'] = this['MyApp'] || {};
this['MyApp']['Templates'] = this['MyApp']['Templates'] || {};
 
// Template function 
this['MyApp']['Templates']['user'] = function() {};

It should contain a string that will be injected before precompiled templates.

options: {
  injectBefore: '// string to enject'
}

Check the HISTORY.md file for change logs and release notes.

Copyright (c) 2012 Ivan Votti Licensed under the MIT license.
https://github.com/ivanvotti/grunt-jade-plugin/blob/master/LICENSE-MIT