Skip to content

Instantly share code, notes, and snippets.

@anthony-dandrea
Last active August 29, 2015 14:19
Show Gist options
  • Save anthony-dandrea/2dc50bc8143bfd02ad17 to your computer and use it in GitHub Desktop.
Save anthony-dandrea/2dc50bc8143bfd02ad17 to your computer and use it in GitHub Desktop.
Python Webassets example

In my site.py I just need to import webassets. I'm using the flask flavor but there's one for every major python framework. https://webassets.readthedocs.org/en/latest/

from flask.ext.assets import Environment, Bundle

Then in my base.html for sass/compass and css minification I have a filter like this:

{% assets filters='compass,scss,cssmin', depends='styles/**/*.scss', output='styles/site.min.css', 'styles/site.scss'%}
  <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
{% endassets %}

My style/ folder looks like this:

$ tree .
.
├── base
│   ├── _btn.scss
│   ├── _extends.scss
│   ├── _typography.scss
│   └── _variables.scss
├── components
│   ├── _code_syntax.scss
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _lists.scss
│   ├── _media.scss
│   ├── _panel.scss
│   └── _slider.scss
├── layout
│   ├── _gradients.scss
│   └── _layout.scss
├── mixins
│   └── _global_mixins.scss
├── pages
│   ├── _home.scss
│   ├── _products.scss
│   └── _whitelabel.scss
├── site.min.css
├── site.scss
└── vendor

site.min.css Is what everything ends up being compiled to.

Then for scripts I use:

{% assets filters='jsmin', output='scripts/all.js', 'scripts/author/**/*' %}
  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

My scripts/ looks like

$ tree .
.
├── all.js
├── author
│   ├── foundation
│   │   └── init.js
│   └── slider
│       └── slider.js

Then all.js is all my js files compiled and minified.

Less files to ask the server for and smaller files to give the client. Tight, cheap, and dope - https://www.youtube.com/watch?v=NgoUieotWQo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment