17
Jan
08

Deploying Compacted Javascript with Django

Here is a small extension to the manage command to make deployment of compacted javascript easier (hopefully).

I think this is better explained with a usage example. I have the templates referring both the standard javascript files for easier debugging and compacted ones for deployment (the debug variable is the standard one and allows the split between development/deployment).

{% if debug %}
  <script src="{{ MEDIA_URL }}js/jquery-1.2.2b.js"
     type="text/javascript"></script>
  <script src="{{ MEDIA_URL }}js/jquery.cookie.js"
    type="text/javascript"></script>
  <script src="{{ MEDIA_URL }}js/jquery.dimensions.js"
    type="text/javascript"></script> 
  <script src="{{ MEDIA_URL }}js/jquery.hoverIntent.js"
    type="text/javascript"></script>
  <script src="{{ MEDIA_URL }}js/jquery.cluetip.js"
    type="text/javascript"></script>
{% else %}
  <script src="{{ MEDIA_URL }}js/jqbase-min.js" 
    type="text/javascript"></script>
{% endif %}

In the settings file I maintain some variables for the JSC command.

JSC_PATH = '/path_to_media/static/js'

JSC_FILES = (
    ('jqbase-min.js',('jquery-1.2.2b.js', 'jquery.cookie.js',
           'jquery.dimensions.js', 'jquery.hoverIntent.js',
           'jquery.cluetip.js')),
    ('jqui-min.js',('ui.mouse.js','ui.draggable.js',
           'ui.draggable.ext.js', 'ui.droppable.js',
           'ui.droppable.ext.js'))
)

# either jsmin or jspacker, defaults to jsmin
JSC_METHOD = 'jsmin'

The first one is the path to the javascript files, the second is a list of compacted filenames and list of files to be included in the compacted one. The third setting is the method to compact the javascript, with options being the jsmin or the jspacker.

Then in the command line I run

./management.py jsc 

to build the compacted files before deployment. Some command line parameters are also available, for example:

./management.py jsc -m jspacker -f jqbase-min.js

The jsc command script (jsmin and jspacker included) must be installed according to these instructions.

I would love to ear about other approaches.




5 Responses to “Deploying Compacted Javascript with Django”


  1. 1 January 17, 2008 at 11:16 am by Kyle

    That's a cool idea.

    I don't like the template code, however. I imagine it would be painful to update as your JS files changed. Since you have all the paths and filenames in settings.py, why not use that to dynamically build your script tags?

  2. 2 January 17, 2008 at 11:17 am by Julian

    I have a template tag that minifies the JavaScript on the fly. Works like charm.

  3. 3 January 17, 2008 at 11:59 am by Rob Hudson

    I've been using a Makefile to compact my JS (detailed here: http://rob.cogit8.org/blog/2007/May/08/r...) but always ran into the problem of manually switching my script tag in my templates. I never thought of using DEBUG. This looks much better in how it ties into the management commands too. Very nicely done.

    I'm sure the same be done for CSS to both minify the CSS and combine it into 1 file for fewer HTTP requests.

    Nice work!

  4. 4 January 17, 2008 at 01:44 pm by Andreas

    Great post! Ive been using something similar a while for both js and css. I also have a script that goes through my templates and picks upp all js and css in my inline_css and inline_js blocks and generates static files of it. Its important that webdevelopers learn the power of minifying js and css in production.

  5. 5 May 17, 2008 at 03:14 pm by mat

Leave a Reply