Tutorial :Django: auto minifying css/js files before release



Question:

I have following case: I want to use uncompressed js/css files during development (to debug js for example) but on production I want to switch automatically to minified versions of that files.

some simple solution is to put in your template:

<script src="some_js.{% if not debug %}min.{% endif %}js"....  

but this require manully providing that such file exist and to do minifaction manullay after original file change.

How do you accomplish this in your projects? Is there any tool for this?


Solution:1

Did you try http://code.google.com/p/django-compress/ ?

See http://djangopackages.com/grids/g/asset-managers/ for a fairly complete list of available asset managers for Django...

If you already are already using django-compress, you should have a look at upgrading to django-pipeline, which is a well maintained fork, with a lot of new features. I encourage everyone to who is using django-compress to switch to django-pipeline instead: * django-pipeline documentation


Solution:2

Django-compress is no longer being maintained. Try https://github.com/cyberdelia/django-pipeline instead.


Solution:3

I've been using webassets and so far I'm very satisfied. What I really like about it, is that you're still able to define your CSS and JS files inside of your templates, instead of in the project configuration.

Documentation can be found at: http://elsdoerfer.name/docs/webassets/


Solution:4

As of the end of 2016, these answers are mostly outdated.

Check here for a few options: https://gitlab.com/rosarior/awesome-django#asset-management

At the moment, django-compressor is a good choice, but there are alternatives depending on what you want to do. I believe webpack is becoming popular these days as well.


Solution:5

I wrote this Makefile to minify and concatenate my JS and CSS files. It depends on the YUI Compressor JAR. After updating a file, you still have to run make though. Nevertheless, you can make it run when the server starts and/or reloads, or setup a commit-hook on your SCM.

Of course you still need the {% if not debug %}, but it's a small price to pay IMO.

Showing the simple usage:

$ make  [css] static/css/first.css  [css] static/css/second.css  [css] static/css/third.css  [css] static/css/and_so_on.css  [tag] @import url("static/css/all.css");  [js] static/js/first.js  [js] static/js/second.js  [js] static/js/third.js  [js] static/js/and_so_on.js  [tag] <script type="text/javascript" src="static/js/all.js"></script>  Done.  


Solution:6

Just released an open-source project that watches directories for changes and auto-minifies JS, auto-compiles SASS/SCSS, runs command line operations, etc.

Check it out at http://devWatchr.com/

It runs using python and pyinotify on your system during development.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »