Separation of static files and assets using Django compressor and using collectstatic

Question

It is very difficult for me to catch my head around using a django compressor.

Here is what I am trying to accomplish:

Separation of static files and assets (LESS, Coffeescript)

I would like to separate the LESS CSS and Coffeescript files into the resource directory

eg.

app └── assets ├── coffee │ └── script.coffee └── less └── style.less 

Saving static resources like images in my static directory

eg.

  app └── static ├── hello.txt └── photo.jpg 

To do this, I added the resource path to the STATICFILES_DIRS variable to allow django-compressor to find the files (which work as expected). Is this the right approach? I tried to find an independent loading path dedicated to the django compressor, but I was unlucky as I am not going to use these assets as statics.

Collection of files for production deployment

For deployment to production, I would like compiled CSS and JS files along with other media in my application / static directory (e.g. images, etc.) to be collected in the app / static-prod directory. But this is not so good, because assets are also collected by using the collectstatic command.

eg.

 (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ ./manage.py collectstatic --noinput Copying '/home/fots/django_learning/app/assets/less/style.less' Copying '/home/fots/django_learning/app/assets/less/import.less' Copying '/home/fots/django_learning/app/assets/coffee/script.coffee' Copying '/home/fots/django_learning/app/static/photo.jpg' Copying '/home/fots/django_learning/app/static/hello.txt' 5 static files copied. 

Using the ./manage.py compress command only accepts a container of my compiled files, not photo.jpg or hello.txt in this example.

The only possible way I found for this is to use the -ignore flag with collectstatic

eg.

 (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ ./manage.py collectstatic --noinput --ignore=less --ignore=coffee Copying '/home/fots/django_learning/app/static/photo.jpg' Copying '/home/fots/django_learning/app/static/hello.txt' 2 static files copied. 

I also messed up the COMPRESS_ROOT and COMPRESS_URL configuration variables, but this only causes additional problems. Changing COMPRESS_ROOT solves the problem with the collection, but now when the compression command is used, the generated files will go to static files in a different place.

These solutions hardly seem elegant. Is there a better way to do this? I feel something is missing.

Thanks in advance for any help :)

Answer 1

I thought I provided the best solution I have found so far, but please feel free to suggest the best alternatives.

The biggest problem interfering with my requirement is that django-compressor uses the same path for its finder and output. The best solution I found is as follows.

Creating a custom finder

First, we create a custom search based on the new setting that COMPRESS_SOURCE_ROOT calls

 from compressor.storage import CompressorFileStorage from compressor.finders import CompressorFinder from compressor.conf import settings class CompressorFileAltStorage(CompressorFileStorage): """ This alternative django-compressor storage class is utilised specifically for CompressorAltFinder which allows an independent find path. The default for ``location`` is ``COMPRESS_SOURCE_ROOT``. """ def __init__(self, location=None, base_url=None, *args, **kwargs): if location is None: location = settings.COMPRESS_SOURCE_ROOT # The base_url is not used by the Finder class so it irrelevant base_url = None super(CompressorFileAltStorage, self).__init__(location, base_url, *args, **kwargs) class CompressorAltFinder(CompressorFinder): """ A staticfiles finder that looks in COMPRESS_SOURCE_ROOT for compressed files, to be used during development with staticfiles development file server or during deployment. """ storage = CompressorFileAltStorage 

Using this new search

Just add this crawler to the STATICFILES_FINDERS setting in addition to the regular "compressor .finders.CompressorFinder"

eg.

 STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', # 'django.contrib.staticfiles.finders.DefaultStorageFinder', 'mycomp.CompressorAltFinder', 'compressor.finders.CompressorFinder', ) 

And now configure the new parameter COMPRESS_SOURCE_ROOT

eg.

 COMPRESS_SOURCE_ROOT = os.path.join(APP_DIR, 'assets') 

I also set my STATIC_ROOT

 STATIC_ROOT = os.path.join(APP_DIR, 'static-prod') 

Testing solutions in development

I specifically tested compiling the LESS source code

 (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ tree app/assets app/assets ├── coffee │ └── script.coffee └── less ├── import.less └── style.less 

With template tags

 {% compress css %} <link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}less/style.less" /> {% endcompress %} 

This is read from the asset directory successfully and updated when files change.

The output is placed in the static-prod directory:

 (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ tree app/static-prod/ app/static-prod/ └── CACHE ├── css │ ├── style.5abda32cfef7.css │ └── style.6ca1a3d99280.css └── js └── script.8cb4f955df19.js 3 directories, 3 files 

Testing Production Solutions

For your reference, here is what my static directory looks like

 (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ tree app/static app/static ├── hello.txt └── photo.jpg 0 directories, 2 files 

So let's go

 (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ rm -rf app/static-prod (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ ./manage.py collectstatic --noinput Copying '/home/fots/django_learning/app/static/photo.jpg' Copying '/home/fots/django_learning/app/static/hello.txt' 2 static files copied. (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ ./manage.py compress Found 'compress' tags in: /home/fots/django_learning/app/templates/layout.html Compressing... done Compressed 2 block(s) from 1 template(s). (django-cpython)fots@fotsies-ubprecise-01:~/django_learning$ tree app/static-prod app/static-prod ├── CACHE │ ├── css │ │ └── 5abda32cfef7.css │ ├── js │ │ └── 3b9d1c08d2c5.js │ └── manifest.json ├── hello.txt └── photo.jpg 3 directories, 5 files 

Then I started the web server as follows and confirmed that the site is working

 ./manage.py runserver 0.0.0.0:8000 --insecure 

Hope this helps someone out there :)