[NEW PLUGIN] CSS/JS Assets

304 views
Skip to first unread message

ikkez

unread,
Aug 4, 2015, 11:24:12 AM8/4/15
to f3-fra...@googlegroups.com
Hey folks,

I wrote a new plugin to improve the whole process of handling javascript and stylesheet template dependencies.
It includes
  • configurable file merging/combination
  • minification using F3's awesome mini minifyer (Web->minify)
  • adding css/jss files from within sub-templates, i.e. from includes like
    <F3:include href="blocks/calendar.html"/>
  • prioritize and order assets
  • supports F3's UI var for easy themes
  • dead simple installation and many more features
Just check http://f3.ikkez.de/assets for more details, demo and documentation.
The source is located at https://github.com/ikkez/f3-assets/

I hope this plugin helps you as much as me. If you have any ideas or suggestions, please let me know.

Have a nice day.

Anatol Buchholz

unread,
Aug 4, 2015, 3:58:47 PM8/4/15
to Fat-Free Framework
T h a n k y o u !

Moheiddine MNEIMNE

unread,
Aug 4, 2015, 4:15:46 PM8/4/15
to Fat-Free Framework
Thanks, this is a very helpful plugin.

Anatol Buchholz

unread,
Aug 5, 2015, 4:09:07 AM8/5/15
to Fat-Free Framework
I will give it a test run today. But after reading the docu!
Great job. As always!

Achille D'Aniello

unread,
Aug 5, 2015, 4:19:18 AM8/5/15
to Fat-Free Framework
Great plugin, very useful. Great doc.

As Ikkez style.

Thanks

xfra35

unread,
Aug 8, 2015, 6:46:48 PM8/8/15
to Fat-Free Framework
Very nice and clean job!

I especially like the "skip", "timestamps" and "filter" features. Very smart =)

Moheiddine MNEIMNE

unread,
Aug 12, 2015, 7:14:53 AM8/12/15
to Fat-Free Framework
I am having a problem (404,wrong path) with assets being loaded with a relative path, for example, the path being compiled is ui/compressed/file.css.

for example :
  • URL : / working
  • URL : /name working
  • URL : /name/action NOT working

Have I done something wrong, i modified the assets class and added the below code to fix it :


Old :

return sprintf('<script src="%s"></script>',$path.$mtime);


New :

return sprintf('<script src="%s"></script>',$f3->get('BASE').'/'.$path.$mtime);




On Tuesday, August 4, 2015 at 6:24:12 PM UTC+3, ikkez wrote:

ikkez

unread,
Aug 12, 2015, 10:03:23 AM8/12/15
to Fat-Free Framework
ah okay, understand. Well usually I use a <base href=".."> tag in my html <head> in most projects... that way I don't need to care about adding the @BASE to any file.

Moheiddine MNEIMNE

unread,
Aug 12, 2015, 10:16:01 AM8/12/15
to Fat-Free Framework
Thats nice, I didn't know that this tag existed. It solved the problem. It wouldn't be harmful to add it as a patch IMHO though.

Thanks,

Joseff Betancourt

unread,
Aug 17, 2015, 6:59:04 PM8/17/15
to Fat-Free Framework
this is template only or works in views as well?

I'm was planning on an assets plugin that does the same with images, documents, etc as well as css. can this be extend for that?

kojiro_cl

unread,
Aug 18, 2015, 5:08:05 PM8/18/15
to Fat-Free Framework
awesome plugin!! very very helpful.. znx ikkez

kojiro_cl

unread,
Aug 25, 2015, 3:47:57 PM8/25/15
to Fat-Free Framework
hi ikkez, I need some help with this plugin.. 

I put this line in index.php to load configs: 
$f3->config('assets.ini');


when I call from a template like
<asset src="dsfaadsg.js" />

doesn't convert to minify, neither change the label "<asset" to the corresponding ones (<scrip> for js,  <link> for css)

next, when i try to load from controller: 
$script = "$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })";
$js = \Assets::instance();
$js->addInline($script, 'js');

it loads in the template but, when minify it, throws an error: Uncaught SyntaxError: Unexpected identifier




El martes, 4 de agosto de 2015, 12:24:12 (UTC-3), ikkez escribió:

ikkez

unread,
Aug 26, 2015, 1:23:48 AM8/26/15
to Fat-Free Framework
hi.
check step 2 of the install guide. do you have this in your index.php after loading the config file?

2. Initialize the asset manager with a simple \Assets::instance(); call in your index.php file or controller.                                

usually this should be enought to make the <asset> tags working. Clear the contents of your tmp/ dir to force a regeneration of the templates.

I used the F3 minifyer for minification. That only cares about removing whitespace and not about adding proper closing semicolons. Try to add those in your scripts:

$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus(); });


Ješka Milbretos

unread,
Dec 13, 2015, 9:32:43 AM12/13/15
to Fat-Free Framework
Hey,

Is it possible to make that filters are processed in same order as they are included in config ?
aka in config

filter.css = cdn_cache, combine, minify

I made a custom filter, I need it to run before combine and minify. 

How can I achieve that ?

ikkez

unread,
Dec 13, 2015, 12:20:04 PM12/13/15
to Fat-Free Framework

Stone Wu

unread,
Oct 6, 2016, 12:04:45 PM10/6/16
to Fat-Free Framework
I use F3 3.5.1 but not working woow!


ikkez於 2015年8月4日星期二 UTC+8下午11時24分12秒寫道：

ikkez

unread,
Oct 7, 2016, 1:33:49 AM10/7/16
to Fat-Free Framework
what is not working?
clear your /tmp folder and try again.
Reply all
Reply to author
Forward
0 new messages