Compress your JS/CSS in Django

Finally integrated webassets (django_assets) into our build process. Very nice interface (using the template-only approach). And other than a few issues with our pyc-only deployments, it pretty much "just worked" once I realized that adding the staticfile-finder for the development server is a critical requirement.

The changes to your settings look like this:

# use False if you want to see the compression on your dev machine
ASSETS_DEBUG = DEBUG
ASSETS_AUTO_BUILD = DEBUG
STATICFILES_FINDERS = [..., 'django_assets.finders.AssetsFinder' ]
INSTALLED_APPS = [..., 'django_assets']

and then you add the following to your fabfile for deployments:

PIP_INSTALLS = [..., 'django_assets', 'yuicompressor' ]

    sudo( '%(django_admin)s collectstatic --clear --noinput '%locals() )
    sudo( '%(django_admin)s assets build --parse-templates '%locals())

so that your staticfiles directory contains your built assets in production. The %(version)s will default to a simple hash of the contents of your css/js, so you can use extremely long expires headers on those.

Once you've done that, you add this to your templates:

{% load assets %}
...
{% assets filters="yui_css", output="css/core-%(version)s.css",
 "css/jquery-ui-1.8.18.custom.css", "css/jquery.miniColors.css", 
"css/corelayout.css" "css/core.css" 
%}
    
{% endassets %}

and for your .js files:

{% assets filters="yui_js", output="js/core-%(version)s.js", 
"js/vendor/jquery-1.7.1.min.js", 
"js/vendor/jquery-ui-1.8.18.custom.min.js", 
"js/vendor/date.js" 
"js/vendor/json2.js" 
"js/vendor/jquery.ba-outside-events.min.js" 
"js/vendor/jquery.miniColors.js" 
"js/core.js" %}
    
{% endassets %}

Your CSS/JS files are now minified and packed into a single file on promotion. The really nice part is that you can now separate out your CSS (and JS) files into lots of separate files that are combined at run-time to produce the final CSS (JS) that just takes a single request to load (and is somewhat smaller).

Comments

Comments are closed.

Pingbacks

Pingbacks are closed.