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