Compiles Jade templates from the browser. Allows you to develop Jade-powered frontend apps, which render templates client-side (you can pass template data in the client, eg: browser).
This plugin is based on the initial work of @two-n on grunt-jade-client.
Install this plugin with the command:
npm install gulp-jade-client
Next, add this line to your gulpfile:
var gulp_jade_client = require("gulp-jade-client");
Lastly, add the configuration settings (see below) to your gulpfile.
Type: String
Default value: JadeClient
Change it to specify another JavaScript container object, which will be used to store and access your templates.
Type: Boolean
Default value: false
If set to true, then the output file will be a requireJs module.
In this example, we build a single js file called templates.js
, which has the result of input compiled Jade templates. In our JavaScript, we can then get the output of the 'hello.jade' template with JadeClient['hello']
(JadeClient
is the default container, but you can change that).
gulp.task("jade_client", function() {
return gulp.src("src/templates/**/*.jade")
.pipe(
gulp_jade_client("templates.js", {
// Options (optional)
// eg:
// container : "JadeClient",
// requireJs : false
})
)
.pipe(
gulp.dest(
"build/javascripts"
)
);
});
Make sure that you have included your compiled template file, as well as runtime.js (copy of the file is on this repo for convenience). Note that there is another module which builds this dependency into the output file, clientjade.
The following code (using jQuery) will render the "hello" template into #target.
$("#target").html(JadeClient["hello"]);