Jinja Inline Asset Compiler
A Jinja2 extension that does inline compiling of static assets. Current supported are css, javascript, less, and coffeescript. This extension is run at parse time of your, so it is only run when the template is compiled and not when it is executed.
Installing
This is currently not in the pypi repository, but you can install directly from github. Add the following to your requirements.txt file.
-e git+https://github.com/bmorgan21/jinja-inline-asset-compiler.git#egg=jiac
Compiler support is dependent on external libraries. You will need to install the following npm packages:
For LESS support, install less:
npm install less -g
For Javascript minification, install uglify-js
npm install uglify-js -g
For CoffeeScript support, install coffee-script
npm install coffee-script -g
Configuring Jinja
import jinja2
from jiac import CompilerExtension
env = jinja2.Environment(extensions=[CompilerExtension])
env.compiler_enabled = True # when disable, the tag does nothing
env.compiler_debug = False # controls whether minification/compression happens
env.compiler_include_path = '<path>' # a string or list of strings that represent the search paths that should be used when processing imports in less
Configuring Flask
import os
from jiac.contrib.flask import JIAC
app = Flask(__name__)
app.config['COMPILER_ENABLED'] = True
app.config['COMPILER_DEBUG'] = app.config.get('DEBUG')
app.config['COMPILER_INCLUDE_PATH'] = os.path.join(os.path.dirname(__file__), 'web/static')
jiac = JIAC(app)
Usage
Using it is as simple as wrapping your style and script tags.
{% compile %}
<style type="text/less">
.foo.bar {
strong {
font-size:10px;
}
}
</style>
<style type="text/css">
h1 {
color:red;
}
</style>
<script type='text/coffeescript'>
hello = () ->
console.log('hello')
goodbye = () ->
console.log('goodbye')
hello()
</script>
<script type='text/javascript'>
function voo() {
console.log('voo');
alert('hello2');
}
</script>
{% endcompile %}
The above will produce the following with debug=True
<style type="text/css">
.foo.bar strong {
font-size: 10px;
}
</style>
<style type="text/css">
h1 {
color: red;
}
</style>
<script type="text/javascript">
// Generated by CoffeeScript 1.7.1
(function() {
var goodbye, hello;
hello = function() {
return console.log('hello');
};
goodbye = function() {
return console.log('goodbye');
};
hello();
}).call(this);
</script>
<script type="text/javascript">
function voo() {
console.log('voo');
alert('hello2');
}
</script>
If you then set debug=False (as you would in production), you would get.
<style type="text/css">
.foo.bar strong{font-size:10px}
</style>
<style type="text/css">
h1{color:#f00}
</style>
<script type="text/javascript">
(function(){var o,n;n=function(){return console.log("hello")},o=function(){return console.log("goodbye")},n()}).call(this);
</script>
<script type="text/javascript">
function voo(){console.log("voo"),alert("hello2")}
</script>
That's it! Enjoy!