Extension, Plugin

Archived
Forum
(read-only)

Minimee

ExpressionEngine 2

Back to this add-on's main page
View Other Add-ons From John D. Wells

     

A little advice…

General

ccdavies
ccdavies

Hi all.

I have been using expression engine for a few years now and cant quite believe I haven’t come across this little beauty sooner.

I use head.js to load all my js in parallel, and am a little confused as to what the best approach would be with minimee and head.js together.

I have attached a screenshot (as loads of code gets removed when I try to post it here) to show how my css, js and head.js files look in the head section.

What would be the best way to use the two together here?

Many Thanks

John D Wells
# 1
Developer
John D Wells

Hi ccdavies,

Here’s how I’d likely go about integrating with Head.js:

head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js")
  .
js("//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js")
  .
js("{exp:minimee js='/-/js/slideshow.js'}")
  .
js("{exp:minimee js='/-/js/modernizr.js'}")
  .
js("{exp:minimee js='/-/js/cookie.js'}")
  .
js("{exp:minimee js='/-/js/selectivizr.js'}")
  .
js("{exp:minimee js='/-/js/scripts.js'}"); 

Note that I’m not Minimee’ing jquery or jquery UI, since these are already serving from fast CDNs and there’s a good chance your site visitors already have these files cached in their browser.

Then the other scripts are each minified individually using an “API” syntax that I released with Minimee 2.x.  You can read more about that and some examples on the Github docs page for Minimee (http://johndwells.github.com/Minimee/).

Before I go, I should mention one problem I’m seeing with how you’re using Minimee on your CSS - the IE-conditional CSS should not be included with your other CSS files, because Minimee will not see this conditional and lump them all in together.  So I would simply break that into 2 Minimee tag pairs, like so:

{exp:minimee:css}
 
<link rel="stylesheet" type="text/css" href="/-/css/cross-browser.less">
 <
link rel="stylesheet" type="text/css" href="/-/css/grid.less">
{/exp:minimee:css}

<!--[if lt IE 9]>
{exp:minimee:css}
 
<link rel="stylesheet" type="text/css" href="/-/css/grid-ie.css">
 <
link rel="stylesheet" type="text/css" href="/-/css/ie.css">
{/exp:minimee:css}
<![endif]--> 

Last, I notice you’re including LESS files in there - are you having a go with Minimee+LESS too?  I’d be keen for any feedback, it’s still a bit of a beta. :)

Hope that helps!

Cheers,
John

ccdavies
# 2
ccdavies

Hi John, thanks for the reply.

That sounds great, I will use head.js and minimee together like you have suggested.

I kinda found out the hardway with the IE conditional, sat here scratching my head for a good hour until I figured it out :)

I tried using the minimee LESS addon. It kept returning parse errors even though the js version clears it fine. I finally managed to sort the parse errors out, and then realised that it was somehow breaking my responsive break points… I spent a couple of hours trying to fix it, but no luck so have removed the addon and gone back to the js for development.

Would be really interested in looking to use it though, if the issue could be fixed?

Many thanks again!

John D Wells
# 3
Developer
John D Wells

Sorry to hear you’ve had trouble with the LESS addon.  To be honest I created it when first getting into LESS, but as soon as I became comfortable with the language, I adopted desktop compile tools (CodeKit as I’m on OSX).  What Minimee+LESS can do in compiling is rather minimal, and depending on how your LESS is written, it could potentially create some duplicate CSS rules.  In reality, I may discontinue support & promotion of it because I think on the whole it’s causing more trouble than the benefits it adds! :(

Cheers,
John

ccdavies
# 4
ccdavies

Agreed, I use SimpLESS on OSX and it works a charm.

Thank you for your help.