Add jade-precompiler to your dependencies section in kanso.json.
...
"dependencies": {
"jade-precompiler": null,
...
}run
kanso installto fetch the package
To tell the precompiler which jade files to transform, add a section called
jade to kanso.json and put in the files you want to process.
...
"jade": {
"compile": [ "pages/about.jade", ... ]
}Running
kanso pushwill compilepages/about.jadetopages/about.htmland upload it to_attachments/pages/about.jade.
The compile property can be:
"folderA"orpath/to/file.jadethe name of a single file or a folder containing files to compile,[ "folderA", "sub/folderB", "path/to/file.jade"]a list of files or folders to compile,trueto instruct the compiler to process all.jadefiles anywhere in the kanso project.
###Parameters
The settings defined in kanso.json will be made available to the templates.
And since kanso is able to overwrite these settings depending on your
kanso push target in .kansorc, your templates can take the target into
account, too.
Given we have these files:
kanso.json
{ "name": "myapp"
, "version": "0.0.1"
, "description": "jade-precompiler show off"
, "dependencies":
{ "jade-precompiler": null
}
, "jade":
{ "compile": [ "index.jade" ]
}
, "use_cdn": true
}.kansorc
exports.env =
{ 'default':
{ db: 'http://127.0.0.1:80/myapp'
, overrides:
{ use_cdn: false
}
}
, 'production':
{ db: 'http://user:p4ss@doma.in:5984/myapp'
, overrides:
{ name: "My Jade Showoff App"
}
}
}Used with a template containing these lines,
doctype 5
html(lang="en")
head
title= name
body
h1 Welcome
#container
p main content goes here
if use_cdn
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
script
window.jQuery || document.write('<script src="javascripts/libs/jquery-1.7.2.min.js"><\\/script>')
else
script(src='javascripts/libs/jquery-1.7.2.min.js')on kanso push the jade-preprocessor will yield
<!DOCTYPE html>
<html lang="en">
<head>
<title>myapp</title>
</head>
<body>
<h1>Welcome</h1>
<div id="container">
<p>main content goes here</p>
</div>
<script src="javascripts/libs/jquery-1.7.2.min.js">
</script>
</body>
</html>on kanso push production however, it will produce
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Jade Showoff App</title>
</head>
<body>
<h1>Welcome</h1>
<div id="container">
<p>main content goes here</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascripts/libs/jquery-1.7.2.min.js"><\\/script>')</script>
</body>
</html>###Compression
The jade-preprocessor can be told to compress the output through the
compress flag (internally, jade refers to this as the pretty flag, but we
stick to the more canonical compress, just like in the less- and stylus-
precompilers).
...
"jade": {
"compile": [ ... ],
"compress": true
}Note: consider using the overrides property in your .kansorc to set the
compress flag according to your push target like so:
exports.env =
{ 'default':
{ db: 'http://127.0.0.1:80/myapp'
, overrides:
{ use_cdn: false
, jade:
{ compress: false // never compress for this environment
}
}
}
}
, 'production':
{ db: 'http://user:p4ss@doma.in:5984/myapp'
, overrides:
{ name: "My Jade Showoff App"
, jade:
{ compress: true // always compress for this environment
}
}
}
}You can also remove any .jade files from attachments (if you placed them
inside a directory also added as static files), by adding the
remove_from_attachments property. This will remove all attachment with a
.jade extension!
...
"jade": {
"compile": [ ... ],
"remove_from_attachments": true
}If you use a directory structure for your jade templates that doesn't fit whats expected you can use rewrites. It could be, for example, that you need to strip out the first folder name. The rewrites list should be a list with find,replace pairs where the find string will be treaded as a regular expression.
...
"jade": {
"compile": [ "pages/index.jade" ],
"rewrites": [
5092
[ "pages/", "" ]
]
}This would remove the leading "pages/" from the compiled files so you end up with just "index.html" instead of "pages/index.html"