With Mineral You can:
- Minify all of HTML output to "one line" form *
- Minify only selected elements/blocks/pages/templates
- Cleaning output from: inline css, inline style blocks, inline scripts blocks
- Cleaning messed up font properties from WYSIWYG editors (vertical rhythm, justifying)
- Use events for custom output processing
*depending on the options selected in the minifier - by default plugin will omit blocks of script
Webstites, which use this plugin: https://www.ecrf.biz.pl/
- CakePHP 3+
- PHP 7.0+
- Create folder in
/src/plugins/
calledMineral
and download repo there. - In
/config/bootstrap.php
load this plugin:Plugin::load('Mineral', ['bootstrap' => FALSE, 'routes' => FALSE]);
- Load MineralHelper Plugin in
/src/View/AppView.php
(go to section basic usage)
First scenario: we wanna minify every output in our app.
Load MineralHelper inside /src/View/AppView.php
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral');
}
}
... and thats all :)
Helper uses cake's afterLayout()
event, so output processing will be called automatically. Now, all HTML has inline form and we can go home, but... there's a lot of scenarios and options we can use.
I think, every front developer should place styles inside css files, but <div style="color:red">it's not always like that</div>.
With this option we cut out inline css and force devs to keep code clean.
By default this option is disabled - bearing in mind wywiwyg
editors - which often use inline css, and that option will limit functionality of ckeditor (for example).
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'css' => TRUE
]);
}
}
Cutting out <style></style>
tags from output with content
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'style' => TRUE
]);
}
}
All of scripts should be placed in .js files, so we should have option to cut out everything which appears inside <script></script>
tags:
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'script' => TRUE
]);
}
}
Everybody who meets WYSIWYG
editors and saw, what customers can do inside this kind of functionality, knows how people can accidentally (or not break typographic standards. This option will precisely remove declarations like: font-family
, line-height
, letter-spacing
, text-align:justify
and will parse margin
and padding
declarations to remove vertical values.
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'fonts' => TRUE
]);
}
}
We have option to manipulating output before Mineral will do that.
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'beforePruning' => function($content) {
return str_replace('NSA', '<div class="hidden">NSA</div>', $content);
}
]);
}
}
Similar option, but with callback we'll get $content
which was cleaned
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'afterPruning' => function($content) {
return str_replace('NSA', '<div class="hidden">NSA</div>', $content);
}
]);
}
}
Of course we can mix all of parameters:
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'css' => TRUE,
'script' => TRUE,
]);
}
}
At the outset, I should point out that the config declared in AppView
, will be default config for all other manipulations, but we can override config by calling override($config)
somewhere in our app (helper, template, element).
Config will be overriden key by key, so if You wanna override css
option (looking at the previous example), You should overwrite that option this way:
<?php $this->Mineral->override([
'css' => FALSE,
/// 'script' option is still true
]) ?>
By default, Mineral uses cake's afterLayout()
event to manipulating output. If we wanna minify only parts of views, we should disable that behaviour, by calling MineralHelper::disable()
method:
<?php<div
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'css' => TRUE
]);
$this->Mineral->disable();
}
}
We can enable minifier back, by using enable()
method.
Inside templates You can use bunch of methods to minify parts of views.
- process
string process(string $content, array $options)
Handy method to minify content
$content
- block, element or just any string
$options
array of options the same as described in sections 1. Minifying entire output
and 2. Callbacks
// minifying element
<?= $this->Mineral->process($this->Element('footer')) ?>
// minifying block
<?= $this->Mineral->process($this->fetch('content'), [
'css' => TRUE
]) ?>
// minifying any string
<?= $this->Mineral->process('<div>
foo
</div>') ?>
- minify
string minify(string $content)
minify method offers standard minification (HTML to "one line" form)
// minifying element
<?= $this->Mineral->minify($this->Element('footer')) ?>
// minifying block
<?= $this->Mineral->minify($this->fetch('content')) ?>
// minify any string
<?= $this->Mineral->minify('<div>
foo
</div>') ?>
- inlineCssPruning
string inlineCssPruning(string $content)
Remove <div style="color:red">inline css</div>
from string
// minifying element
<?= $this->Mineral->inlineCssPruning($this->Element('footer')) ?>
// minifying block
<?= $this->Mineral->inlineCssPruning($this->fetch('content')) ?>
// minify any string
<?= $this->Mineral->inlineCssPruning('<div style="color:red">foo</div>') ?>
- inlineStylePruning
string inlineStylePruning(string $content)
Remove style tags from output
// minifying element
<?= $this->Mineral->inlineStylePruning($this->Element('footer')) ?>
// minifying block
<?= $this->Mineral->inlineStylePruning($this->fetch('content')) ?>
// minify any string
<?= $this->Mineral->inlineStylePruning('<style> * {color:red}</style>') ?>
- inlineScriptPruning
string inlineScriptPruning(string $content)
Remove script blocks from output
// minifying element
<?= $this->Mineral->inlineScriptPruning($this->Element('footer')) ?>
// minifying block
<?= $this->Mineral->inlineScriptPruning($this->fetch('content')) ?>
// minify any string
<?= $this->Mineral->inlineScriptPruning('<script>alert("hello")</scrpt>') ?>
Now, we know every methods in this plugin. We can use them for example to minifying only specific pages.
Let's say that we have $page
entity in view, which comes from controller, and we wanna minify this page only if that page has set $page->minify
property to true.
We can write custom method in app view, which takes $page
entity as parameter and decides to enable or disable minification.
In /src/View/AppView.php
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Mineral.Mineral', [
'css' => TRUE,
'script' => TRUE,
'style' => TRUE
]);
$this->Mineral->disable();
}
// our custom method
public function minifyMe($page) {
if($page->minify) {
return $this->Mineral->enable();
}
return $this->Mineral->disable();
}
}
And in your template You can call Your method:
<head>
<?php $this->minifyMe($page) ?>
</head>