Django Compressor and yUglify

Like many folks out there I’ve been making use of the YUI Compressor for quite a few years as part of my build process (currently as part of Django Compressor). About a year ago it was announced that YUI Compressor was going to go through a deprecation process and in the months since it has been given a new owner and has even seen an update.

But like the YUI team, I figured it’s probably time to move on as there are lots of new tools available including Closure and UglifyJS. The YUI team has also released a new library wrapper around UglifyJS and cssmin with the default YUI configurations on each of them called yUglify. So if you’re coming from YUI Compressor like myself, this library will keep things working basically the same.

To get started, you’ll first need to install yuglify globally via npm (I’m assuming you already have node and npm):

sudo npm -g install yuglify

view raw
yuglify.sh
hosted with ❤ by GitHub

Next you’ll need to update your Django settings with the following:

COMPRESS_YUGLIFY_BINARY = 'yuglify' # assumes yuglify is in your path
COMPRESS_YUGLIFY_CSS_ARGUMENTS = '–terminal'
COMPRESS_YUGLIFY_JS_ARGUMENTS = '–terminal'

view raw
settings.py
hosted with ❤ by GitHub

Now for the new compressor filter:

from compressor.conf import settings
from compressor.filters import CompilerFilter
class YUglifyFilter(CompilerFilter):
command = "{binary} {args}"
def __init__(self, *args, **kwargs):
super(YUglifyFilter, self).__init__(*args, **kwargs)
self.command += ' –type=%s' % self.type
class YUglifyCSSFilter(YUglifyFilter):
type = 'css'
options = (
("binary", settings.COMPRESS_YUGLIFY_BINARY),
("args", settings.COMPRESS_YUGLIFY_CSS_ARGUMENTS),
)
class YUglifyJSFilter(YUglifyFilter):
type = 'js'
options = (
("binary", settings.COMPRESS_YUGLIFY_BINARY),
("args", settings.COMPRESS_YUGLIFY_JS_ARGUMENTS),
)

view raw
filters.py
hosted with ❤ by GitHub

Finally, go back to your Django settings and update your compressor settings with the new filter. Here are some examples (I’ve placed the filter in app/compressor/filters.py):

# Old
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter', 'compressor.filters.yui.YUICSSFilter']
# New
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter', 'app.compressor.filters.YUglifyCSSFilter']
# Old
COMPRESS_JS_FILTERS = ['compressor.filters.jsmin.SlimItFilter']
# New
COMPRESS_JS_FILTERS = ['app.compressor.filters.YUglifyJSFilter']

view raw
settings.py
hosted with ❤ by GitHub

I’ll see if I can push this upstream to the Compressor folks when I’ve got a few minutes.

I’ve also started looking at moving from Django Compressor to Django Pipeline as it supports yUglify out of the box but I’ll save that for another post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s