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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sudo npm -g install yuglify |
Next you’ll need to update your Django settings with the following:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
COMPRESS_YUGLIFY_BINARY = 'yuglify' # assumes yuglify is in your path | |
COMPRESS_YUGLIFY_CSS_ARGUMENTS = '–terminal' | |
COMPRESS_YUGLIFY_JS_ARGUMENTS = '–terminal' |
Now for the new compressor filter:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | |
) |
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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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'] |
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.