Bender: ideological fighter for minimal CSS / Javascript
Not so long ago, there was already an article on Habré about a CSS / Javascript file combinator: a plugin for Smarty - Combine . This case is useful because it allows you to speed up page loading and reduce the load on the server. Then there was the idea to create your combinator + minimizer, which could be used not only in projects on Smarty, but in general in any. The idea turned into a bender. It must meet the following requirements:
Initially, the task was to optimize the loading of CSS / Javascript of a single project based on CS-Cart (it also uses Smarty). The project consistently loaded 17 CSS files, and 15 Javascript, which of course, is no good. Of these, about half fell on the CS-Cart engine itself, and the second on installed add-ons. We needed a solution that would allow to combine CSS / Javascript and do it with minimal changes to the original project files. Addons load their own CSS and Javascript. I did not want to go into the logic of add-ons themselves, so Bender allows you to make a queue of CSS / Javascript, in the same way as Wordpress.
Bender does not claim uniqueness and opportunities (such as assetic ). Here is another task: minimal (with packers it’s just 3 files), and ease of connection to an existing project.
')
As an example, take a piece of code that connects CSS and Javascript,four pieces in a row, two pieces each:
Now add Bender:
The result of Bender will be the following code:
If the resulting files have already been created, they are not overwritten. This behavior can be changed through the ttl property (see below).
CSS / JS outputfiles minimized. By default, for Javascript, Dean Edwards 'JavaScriptPacker is used, for CSS, Joe Scylla' CssMin. They give a very good result, but in the future it will be possible to connect other minimizers. Also, you can disable minimization altogether - the result will be combined, but not compressed files.
Bender includes a plugin for Smarty. To do this, simply place function.bender.php in the Smarty plugins directory, without forgetting to include the Bender class itself somewhere in the project initialization scripts. Using Bender in a Smarty Template:
Bender has a minimum of properties. Here they are:
Download Bender from GitHub | Instructions for use in English
I would welcome suggestions for improvement, reviews and even criticism in the comments. I think you guessed that the name Bender has nothing to do with Futurama - it comes from the word "combinator".
- Easy and quick integration into any finished project, with minimal changes to the latter
- Minimum code size and number of files
- Universality and independence from technology and frameworks - to work on any hosting, even the most limited
Initially, the task was to optimize the loading of CSS / Javascript of a single project based on CS-Cart (it also uses Smarty). The project consistently loaded 17 CSS files, and 15 Javascript, which of course, is no good. Of these, about half fell on the CS-Cart engine itself, and the second on installed add-ons. We needed a solution that would allow to combine CSS / Javascript and do it with minimal changes to the original project files. Addons load their own CSS and Javascript. I did not want to go into the logic of add-ons themselves, so Bender allows you to make a queue of CSS / Javascript, in the same way as Wordpress.
Bender does not claim uniqueness and opportunities (such as assetic ). Here is another task: minimal (with packers it’s just 3 files), and ease of connection to an existing project.
')
How to use it?
As an example, take a piece of code that connects CSS and Javascript,
<html lang="en"> <head> <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </head> <body> ... </body> </html> Now add Bender:
<html lang="en"> <head> <?php require_once "Bender/Bender.class.php"; $bender = new Bender(); // CSS JS $bender->enqueue("assets/css/bootstrap.css"); $bender->enqueue("assets/css/bootstrap-theme.css"); $bender->enqueue("assets/js/jquery-1.10.2.js"); $bender->enqueue("assets/js/bootstrap.js"); // , : $bender->enqueue(array("assets/css/bootstrap.css", "assets/css/bootstrap-theme.css", ...)); // / CSS <link rel="stylesheet" href="..." /> <head> echo $bender->output("cache/stylesheet.css"); ?> </head> <body> ... <?php // / JS <script src="..."> </body> ( ) echo $bender->output("cache/javascript.js"); ?> </body> </html>
The result of Bender will be the following code:
<html lang="en"> <head> <link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/javascript.js"></script> </body> </html>
If the resulting files have already been created, they are not overwritten. This behavior can be changed through the ttl property (see below).
CSS / JS output
Smarty
Bender includes a plugin for Smarty. To do this, simply place function.bender.php in the Smarty plugins directory, without forgetting to include the Bender class itself somewhere in the project initialization scripts. Using Bender in a Smarty Template:
<html lang="en"> <head> {bender src="assets/css/bootstrap.css"} {bender src="assets/css/bootstrap-theme.css"} {bender src="assets/js/jquery-1.10.2.js"} {bender src="assets/js/bootstrap.js"} {bender output="cache/stylesheet.css"} </head> <body> ... {bender output="cache/javascript.js"} </body> </html>
Properties
Bender has a minimum of properties. Here they are:
$bender->cssmin: "cssmin" CssMin, CSS. $bender->jsmin: "packer" JavaScriptPacker, "jshrink" JShrink, JS. $bender->ttl: . 3600 , , . 0 - , -1 - .
In the plans
- Twig and Wordpress Plugins
- Add options for enqueue and output
- The $ dev property will give the files “as is”, without combining - for debug mode
Download Bender from GitHub | Instructions for use in English
I would welcome suggestions for improvement, reviews and even criticism in the comments. I think you guessed that the name Bender has nothing to do with Futurama - it comes from the word "combinator".
Source: https://habr.com/ru/post/199512/
All Articles