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.7.3.zip

v1.7.3
- updated minify libraries (https://github.com/matthiasmullie/minify) to current version (1.3.73) - bugfix
v1.7.2
- updated minify libraries (https://github.com/matthiasmullie/minify) to current version (1.3.72)

v1.7.1
- fixed a bug (introduced in 1.7) where frontend.css/js are not added anymore
License: GNU / GPL
Timestamp: 13-03-2024
Version: 1.7.3
Filesize: 36.88 KB
Downloads: 175

minified-v1.7.2.zip
Version: 1.7.2, Timestamp: 13-03-2024, Downloads: 120
v1.7.2
- updated minify libraries (https://github.com/matthiasmullie/minify) to current version (1.3.72)

v1.7.1
- fixed a bug (introduced in 1.7) where frontend.css/js are not added anymore

minified-v1.7.1.zip
Version: 1.7.1, Timestamp: 24-04-2023, Downloads: 274
v1.7.1
- fixed a bug (introduced in 1.7) where frontend.css/js are not added anymore

minified-v1.7.zip
Version: 1.7, Timestamp: 02-01-2023, Downloads: 323
v1.7
- Upgraded 3rd party libraries to v1.3.70
- fixes some small bugs for path detection

minified-v1.6.zip
Version: 1.5, Timestamp: 13-03-2021, Downloads: 728
v1.6
- Upgraded 3rd party libraries, fixes a bug with PHP 7.4. (thnx Franky)

minified-v1.5.zip
Version: 1.5, Timestamp: 31-07-2019, Downloads: 862
v1.5
- Upgraded 3rd party libraries, fixes a bug with @import in CSS. (thnx Boudi)

minified-v1.4.zip
Version: 1.4, Timestamp: 10-05-2019, Downloads: 928
v1.4
- Now possible to use minified in multiple templates.

minified-v1.3.zip
Version: 1.3, Timestamp: 12-02-2019, Downloads: 904
v1.3
- Working on older WB versions and WBCE

minified-v1.2.zip
Version: 1.2, Timestamp: 17-04-2018, Downloads: 937
v1.2
- Fully working on WB-portable now

minified-v1.1.zip
Version: 1.1, Timestamp: 16-03-2018, Downloads: 945
v1.1
- fixed windows paths in _minify_filename (thanks crnogorac081)
- create unique filenames for minified.css/.js to prevent updated files being cached
- when logged-in, every pageload is checking changed files and will rewrite changes. No need for CTRL-F5 anymore.
- upgraded 3rd party library to latest version

minified-v1.0.zip
Version: 1.0, Timestamp: 05-09-2017, Downloads: 1009
v1.0
- Initial version