pelican-webassets 0.1.0

pelican-webassets

This plugin allows you to use webassets (a popular asset management application for Python web development) to manage your CSS and JavaScript assets for your Pelican powered static website.

webassets comes with many filters like:

• cssmin and yui_css to compress your CSS assets

• libsass and less to compile CSS assets.

• closure_js and uglifyjs for your JS assets

as well as many more useful things like

• URL Expiry “cache-busting”, allowing you to set your Expires headers for your assets long into the future.

• spritemapper to merge multiple images into one and generates CSS positioning for the corresponding slices

• datauri to replace url() references to external files with internal data: URIs.

For a more complete list, check out the included filters section in their documentation.

Installing

The pelican-webassets package is ready to be installed via a simple pip command:

$ pip install pelican-webassets

Then add the plugin to your list of PLUGINS in your pelicanconf.py file to include the plugin in your next pelican build.

PLUGINS = [
    # ...
    'pelican_webassets',
    # ...
]

Using the Plugin

After you’ve installed the package, include one or more {% assets %} tags into your templates to generate the links to your processed assets.

{% assets filters="libsass,cssmin", output="css/style.min.css", "css/style.scss" %}
  <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %}

The example above uses the libsass and cssmin filters to compile, minify and save style.scss to ASSET_URL (equals {THEME_STATIC_DIR}/) and results in a final output path of:

<link href="http://{SITEURL}/{THEME_STATIC_DIR}/css/style.min.css?b3a7c807" rel="stylesheet">

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

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

Options

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

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

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

{% assets 'my_bundle' %}

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

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

Want to Help?

Please feel free to help. Issues, pull requests, even patches via email, all are warmly welcomed.