Django Compressor & JS tooling (Gulp, Webpack...)

[browniebroke]

There are number of tools that are used a lot among purely Javascript developers, but they tend to change every few years. We had Bower, Grunt & Gulp, now Webpack, parcel and rollup are quite popular, tomorrow esbuild and the likes will rule that space.

I'm wondering how django-compressor positions itself in this landcape of front-end tools: is it an alternative to them or something that can be used alongside them? Is there any point in trying to configure e.g. Gulp to build & optimise my SASS/JS files and then wrap its output inside a pair of compress tags from Django Compressor?

Context: Cookiecutter Django currently offers the option to have Gulp as JS task runner (to compiles SASS to CSS and minifies the JS) with django compressor on top, but it feels like 2 competing solutions.

[diox]

I don't think there is much point of using both. IMHO these days compressor is mostly useful as an alternative for people who don't want to keep up with the ever changing JavaScript-based frontend assets pipeline landscape and have an easy to set up tool that works both in development and in production built for Django projects.

FWIW I consider compressor pretty much done in terms of features at this point. People that want more features, something more modern, or better integrated with a JavaScript stack should look elsewhere.

[carltongibson]

Hey @browniebroke. I've used compressor with all number of these tools over the years.

I essentially defer to the tool-in-play by defining COMPRESS_PRECOMPILERS to run the appropriate incantation, be it webpack, or esbuild, or sass, or postcss, or...

You don't need compressor for this but (for me) it answers the How does this tie-in to Django? question very well: Just add a link or script tag in the appropriate place and you're done. (The fact that it understands staticfiles helps a lot.)

There may be a few other niceties, like reloads, and cache clearing, and things that could be smoothed — in collaboration with other Django ecosystem packages — but TBH I don't see those being handled better with other tooling.

[browniebroke]

Interesting, I didn't know about this setting. It seems super useful.

Webpack and Gulp themselves don't know how to handle SASS files, they have to resort to plugins to do the job, so in this sense they act merely as orchestrators, handing over file from plugin to plugin. This setting seems to do something similar. AFAIU, compressor would calls SASS before doing the regular CSS uglifying. All in all, it seems like compressor works at the same level as Gulp/Webpack, but as you said, with a completely different approach.

The reason for my question is that in cookiecutter django, we have pretty complex bit of template to handle using Gulp alongside Compressor, but from this discussion, we're doing it it wrong. We shouldn't offer Gulp together with Compressor, but we do at the moment.

[carltongibson]

Yeah... 🤔 — It sounds like you could go either way there. Both compressor and gulp have the job of putting a processed file in STATIC_ROOT so that the web server can serve it. Either is going to be fine…

My approach has been to use COMPRESS_PRECOMPILERS to allow compressor to hand-off, so in this case it would run the gulp steps, but that's not necessary. The reason I do it is because I like having the single point of control in my (base) templates — I think that's super valuable.

Can't say what you should do for the cookiecutter django — though I agree that snippet is not easy to read at a single pass...

[gav-fyi]

Having searched quite a lot for Django-x-Webpack examples, most of which result in having 2 local dev servers, one for the front-end and one for an API back-end, I've never found a nice solution to getting django-compressor working nicely with Webpack (or gulp).

I'd be very interested in seeing any examples that you know of with a working setup?

[rjbullock]

I've been seeking the same, FWIW.

[alfonsrv]

The fact that it understands staticfiles helps a lot.

Does this mean compressor can essentially generate a per-site static CSS/JS file?