From fed8e8b331668963d6d5f944211490541274eace Mon Sep 17 00:00:00 2001 From: Simon Date: Sat, 12 May 2012 23:48:57 +0200 Subject: [PATCH] documentation for webassets --- docs/settings.rst | 54 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/docs/settings.rst b/docs/settings.rst index 85e9f0c3..582cd9d4 100644 --- a/docs/settings.rst +++ b/docs/settings.rst @@ -369,6 +369,7 @@ Setting name (default value) What does it do? value is `static`, but if your theme has other static paths, you can put them here. `CSS_FILE` (``'main.css'``) Specify the CSS file you want to load. +`WEBASSETS` (``False``) Asset management with `webassets` (see below) ================================================ ===================================================== By default, two themes are available. You can specify them using the `-t` option: @@ -418,7 +419,58 @@ adding the following to your configuration:: CSS_FILE = "wide.css" -.. _pelican-themes: :doc:`pelican-themes` +Asset management +---------------- + +The `WEBASSETS` setting allows to use the `webassets`_ module to manage assets +(css, js). The module must first be installed:: + + pip install webassets + +`webassets` allows to concatenate your assets and to use almost all of the +hype tools of the moment (see the `documentation`_): + +* css minifier (`cssmin`, `yuicompressor`, ...) +* css compiler (`less`, `sass`, ...) +* js minifier (`uglifyjs`, `yuicompressor`, `closure`, ...) + +Others filters include gzip compression, integration of images in css with +`datauri` and more. Webassets also append a version identifier to your asset +url to convince browsers to download new versions of your assets when you use +far future expires headers. + +When using it with Pelican, `webassets` is configured to process assets in the +``OUTPUT_PATH/theme`` directory. You can use it in your templates with a +template tag, for example: + +.. code-block:: jinja + + {% assets filters="cssmin", output="css/style.min.css", "css/inuit.css", "css/pygment-monokai.css", "css/main.css" %} + + {% endassets %} + +will produce a minified css file with the version identifier: + +.. code-block:: html + + + +Another example for javascript: + +.. code-block:: jinja + + {% assets filters="uglifyjs,gzip", output="js/packed.js", "js/jquery.js", "js/base.js", "js/widgets.js" %} + + {% endassets %} + +will produce a minified and gzipped js file: + +.. code-block:: html + + + +.. _webassets: https://github.com/miracle2k/webassets +.. _documentation: http://webassets.readthedocs.org/en/latest/builtin_filters.html Example settings ================