jiac

A Jinja extension (compatible with Flask) to compile and/or compress your assets inline.


License
Other
Install
pip install jiac==0.2.1

Documentation

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!