XF 2.1 Adding JS in Template throws a JS error when minified

[PlanetMaster]

I have an HTML Widget that uses some JS.
Since the JS is tiny, I'm just using it inline to save one HTTP request.

The following JS works fine in Widgets (and Templates) but throws a syntax error before even saving when minified.

JS original:

$('.xhfb-hover').hover(function() {
    $(this).closest('.xhfb1,.xhfb2,.xhfb3,.xhfb4').addClass('hover');
}, function() {
    $(this).closest('.xhfb1,.xhfb2,.xhfb3,.xhfb4').removeClass('hover');
});

JS minified:

$('.xhfb-hover').hover(function(){$(this).closest('.xhfb1,.xhfb2,.xhfb3,.xhfb4').addClass('hover')},function(){$(this).closest('.xhfb1,.xhfb2,.xhfb3,.xhfb4').removeClass('hover')})

Any ideas what could be causing the issue?

 

[Chris D]

Yes, characters such as {$ make it look like XF template syntax so our compiler is trying to parse things like {$(this).closest as our template syntax and it is getting confused.

Honestly, there is such little benefit in minifying this incredibly small amount of code, I wouldn't bother. If you absolutely want to, you'll need to put a space between the { and $ characters:

$('.xhfb-hover').hover(function(){ $(this).closest('.xhfb1,.xhfb2,.xhfb3,.xhfb4').addClass('hover')},function(){ $(this).closest('.xhfb1,.xhfb2,.xhfb3,.xhfb4').removeClass('hover')})

 

[PlanetMaster]

Thanks. This did the trick.
I know the code is small enough not to make any real-world difference (especially after being gZipped) but its about the practice.
My intention is never to change this code (not until next site-wide upgrade) so it makes sense to minify it no matter the size.