Minify - WebsiteBaker snippet

Combineer meerdere CSS en JS bestanden in enkele bestanden en comprimeer ze automatisch naar een optimaal formaat.

Let op: deze snippet is bedoeld voor gevorderde WebsiteBaker gebruikers!

CMS systemen - ook WebsiteBaker -  maken gebruik van meerdere CSS en/of JS bestanden die o.a. door modules/addons worden aangegeven.
Dit zorgt ervoor dat voor ieder CSS en JS bestand een aparte verbinding moet worden opgezet door de webbrowser om deze op te halen. Afhankelijk van de hoeveelheid die moet worden geladen kan dat nadelig zijn voor de snelheid van de website.

Ook externe javascript zoals jQuery vanuit CDN en font CSS bestanden zorgen voor extra browser connecties.

Deze snippet kan alle(*) css en javascript bestanden combineren tot 1 bestand voor css  en 1 bestand voor javascript.

Installatie

De snippet wordt geinstalleerd als iedere andere module in WebsiteBaker. Na de installatie zijn er in de template 2 functies beschikbaar.

<?php minify_css(); ?>

en

<?php minify_js(); ?>

Deze commando's zorgen ervoor dat een regel wordt geschreven voor minified.css en minified.js.
Plaats deze dus op dezelfde plaats waar je normaal je .css en .js bestanden zou plaatsen.

Omdat deze snippet ook de frontend.css en frontend.js bestanden zal toevoegen moeten de WB functies voor het toevoegen niet in de template worden gebruikt.
Verwijder dus eventuele regels als register_frontend_modfiles('css'); en register_frontend_modfiles('js'); uit de template.

Voor dat deze functies worden gebruikt moeten de benodigde CSS  en JS bestanden worden gedefinieerd.

Dit doe je door bovenin de template in een bestaand PHP code deel (of een zelf te maken PHP deel) de variabelen (arrays) $css en $js te definieren.

Voorbeeld:

<?php
$css[] = "css/bootstrap.min.css";
$css[] = "css/font-awesome.css";
$css[] = "css/custom.css";
$css[] = "css/fancybox/jquery.fancybox-1.3.4.css";
$css[] = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700';
?>

en voor javascript:

<?php 
$js[] = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
$js[] = "js/bootstrap.min.js";
$js[] = "js/skrollr.min.js";
$js[] = "fancybox/jquery.fancybox-1.3.4.pack.js";
?>

Uiteraard zijn dit alleen maar voorbeelden. Gebruik dezelfde css en javascript links die normaal in de template zouden worden gebruikt.

Naast deze css en javasript bestanden zal de snippet zelf zorgen dat alle gebruikte frontend.css en frontend.js bestanden worden toegevoegd.

Omdat op iedere pagina die deze template gebruikt verschillende frontend bestanden kunnen worden gebruikt worden al deze bestanden in de gecombineeerde output toegevoegd. Dit zou - vooral bij javascript -  problemen kunnen opleveren doordat javascript functies met elkaar conflicteren.
In dat geval is deze snippet op dit moment niet bruikbaar!

Verversen

De snippet zal bij lokale bestanden de datum/tijd vergelijken om te bepalen of er bestanden zijn gewijzigd. Als dat het geval is worden de css/js bestanden opnieuw samengevoegd en gecomprimeerd.
Als je dit wilt forceren kan dat door het toevoegen van de parameter ?force aan de huidige url.
De snippet probeert ook te herkennen of een pagina met behulp van de toetscombinatie CTRL-F5 wordt ververst. In dat geval zal het ook opnieuw gecomprimeerd worden.
Om onnodig verversen van de CSS te voorkomen zal dit alleen gedaan worden als de bezoeker is ingelogd in de WebsiteBaker website of admin.

* javascript die vanuit functies andere scripts aanroepen kunnen problemen geven. Goed testen is hier belangrijk!

Credits

Veel dank is verschuldigd aan Matthias Mullie voor het maken van de hier gebruikte PHP library minify.

Download

minified-v1.0.zip

v1.0
- Initial version
License: GNU / GPL
Timestamp: 04-09-2017
Version: 1.0
Filesize: 32.00 KB
Downloads: 28

comments powered by Disqus