Django-compressor and template inheritance

Question

I'm using the django-compressor app in Django 1.2.3 to minify and merge a number of included CSS and JS files. In a base template, I have

{% load compress %}
{% compress js %}
{% block js %}
<script type="text/javascript" src="/site_media/js/jquery.query-2.1.7.js">
{% endblock %}

and in a child,

{% block js %}
{{block.super}}
<script type="text/javascript" src="/site_media/js/jquery.validate.min.js">
{% endblock %}

When the templates render, the first script tag is correctly minified, but the second isn't. In similar scenarios, I've confirmed that the issue is inheritance.

I don't want to keep using compress tags in child templates, because half the point of using this app is to merge the files and and cut back on the HTTP requests. Am I missing something? Is there another solution I should look into?

Answer 1

I use django-compressor with Django 1.2, and I set it up like this:

{% compress js %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js"></script>
{% block extra_compressed_js %}{% endblock %}
{% endcompress %}

{% block external_js %}{% endblock %}

And with my extra_compressed_js block I will often use the method you described, with {{ block.super }} to add more js through inheritance. It works for me without any trouble. One thing that you have to be careful about is that all the JS to compress needs to be available on the local filesystem. That's why I have a separate external_js block, for JS that comes from an outside source.

It sounds to me like something else is going on. Make sure your copy of compressor is up to date, and then check on your inheritance to make sure it's actually working correctly. One way to do this is by setting COMPRESS=False in your settings and making sure that all of the javascript that you want included actually shows up in the rendered template.

Answer 2

I don't know if this will work, but it seems worth a try:

First have these blocks in your base template:

{% compress js %}
{% block js %}
{% endblock %}
{% endcompress %}

{% compress css %}
{% block css %}
{% endblock %}
{% endcompress %}

and then in a given child template:

{% block js %}
{{ block.super }}
<script type="text/javascript" src="/site_media/js/jquery.query-2.1.7.js">
{% endblock %}

Always use block.super. Like I said, I don't know if it will work, but it might.