pelican-webassets 1.0.0

JavaScript

Another JavaScript example uses closure_js to combine, minify and compress js/jQuery.js and js/app.js:

{% assets filters="closure_js", output="js/packed.js", "js/jQuery.js", "js/widgets.js" %}
 <script src="{{SITEURL}}/{{ASSET_URL}}"></script>
{% endassets %}

into a script element like this:

<script src="{SITEURL}/{THEME_STATIC_DIR}/js/packed.js?00703b9d"></script>

WEBASSETS_DEBUG

By default, if pelican is in DEBUG mode, pelican-webassets will not process any assets, helping you with debugging. To override this behavior, set WEBASSETS_DEBUG = True to process files regardless of the DEBUG flag.

# put webassets into DEBUG mode if pelican is
WEBASSETS_DEBUG = logger.getEffectiveLevel() <= logging.DEBUG

WEBASSETS_CONFIG

Some filters require extra configuration options to function properly. You can use WEBASSETS_CONFG to specify these options in a list of (key, value) tuples that are passed along to the webassets’ environment.

WEBASSETS_CONFIG = [
  ('closure_compressor_optimization', 'ADVANCED_OPTIMIZATIONS'),
  ('libsass_style', 'compressed')
]

WEBASSETS_BUNDLES

WEBASSETS_BUNDLES is a list of 3 item tuples consisting of (name, args, kwargs) which will be passed to the webassets’ environment.

WEBASSETS_BUNDLES = ((
     'my_bundle',
     ('css/style.scss',),
     {'output': 'css/style.min.css', 'filters': ['libsass', 'cssmin']}
),)

Allowing you to simplify something like this:

{% assets filters="libsass,cssmin", output="css/style.min.css", "css/style.scss" %}

into this:

{% assets 'my_bundle' %}

More information about both webassets’ environment configuration and named bundles can be found in the webassets documentation.

WEBASSETS_SOURCE_PATH

If your raw assets are in directories other than your THEME_STATIC_PATHS, you can supply additional directories to search in with WEBASSETS_SOURCE_PATHS.

WEBASSETS_SOURCE_PATHS = [
   'src/scss',
   'src/js'
]