Helper combining scripts and styles in one file for the old man ZF1
If you want for many scripts added:
instead of this:
get this:
Then this article is for you.
The helper can be installed using composer:
or just download / redo from github: github.com/denis-isaev/ZendHeadConcat
In Bootsrap.php you need to add the path to the directory with the helpers and the prefix of the class name:
Add the helper configuration to apllication.ini:
Description of parameters:
In the place where you need to add script tags (layout or view), we write:
and the output in html is:
The resulting
')
The file name is md5 from the original list of scripts and their modification time. Thus, after the initial generation of the caching file, the helper will not generate it again on subsequent hits. A new generation of a caching file will occur only if the list of files that we merge has changed or the modification time of one of them has changed.
With each new generation, a new caching file will be obtained, while the old file is not deleted, so it makes sense to periodically clean the directory with the cache, deleting all its contents.
For the resulting file, you can specify the type (
the output will be:
When adding a script using the headScript helper:
at the exit:
While traversing the list of scripts to be merged, the helper checks the type of the added script to match the type of the resulting file, and if they are different, the current script is marked as noConcat:
Now when calling the helper with the specified type of
the output will be:
and when called with the default type:
the output will be:
For CSS styles completely similar helper. Immediately config and examples.
Adding files:
Helper call:
at the exit:
Calling the helper with the media attribute (tv) and the condition (lt IE 9):
at the exit:
When adding a style file with $ extras attributes
If the media attribute (tv) of a file
When using conditions
You can manually tag a file as NoConcat like this:
I use these helpers in this bundle:
As a result, we have in dev mode the original files of scripts and styles, each connected via a separate script / link tag, and in production mode, the minified versions combined into one file.
$this->view->headScript()->appendFile('/static/js/script1.js'); $this->view->headScript()->appendFile('/static/js/script2.js'); $this->view->headScript()->appendFile('/static/js/script3.js'); instead of this:
<script type="text/javascript" src="/static/js/script1.js"></script> <script type="text/javascript" src="/static/js/script2.js"></script> <script type="text/javascript" src="/static/js/script3.js"></script>
get this:
<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>
Then this article is for you.
Helper installation
The helper can be installed using composer:
require: { "denis-isaev/zend-view-helper-head-concatenate": "*@dev" }, "repositories":[ { "type":"git", "url":"http://github.com/denis-isaev/ZendHeadConcat" } ]
or just download / redo from github: github.com/denis-isaev/ZendHeadConcat
Helper configuration
In Bootsrap.php you need to add the path to the directory with the helpers and the prefix of the class name:
$view->addHelperPath(APPLICATION_PATH . '/../vendor/denis-isaev/zend-view-helper-head-concatenate/library/Iden/View/Helper/', 'Iden_View_Helper');
Add the helper configuration to apllication.ini:
resources.view.concatenateHeadScript.enable = true resources.view.concatenateHeadScript.cacheDir = APPLICATION_PATH "/../static/cache/" resources.view.concatenateHeadScript.cacheUri = /static/cache/ resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static"
Description of parameters:
- enable - on / off helper. If this parameter is set to false, the helper returns a Zend_View_Helper_HeadScript instance instead of itself, and all script tags are displayed as usual.
- cacheDir - path to the directory where caching files will be added.
- cacheUri - uri directories in which caching files will be added.
- map - here it is necessary to indicate the correspondence of uri to the directories in which your scripts are stored.
Example:
resources.view.concatenateHeadScript.map./uri_path = APPLICATION_PATH "/../file_path"
$this->view->headScript()->appendFile('/uri_path/js/script1.js');
APPLICATION_PATH "/../file_path/js/script1.js"
More realistic example:
resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static" $this->view->headScript()->appendFile('/static/js/script1.js');
APPLICATION_PATH "/../static/js/script1.js"
If you have several aliases for several directories with scripts in the web server, then you need to describe them all so that the helper can find files in all directories. Example:
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static" resources.view.concatenateHeadLink.map./admin/static = APPLICATION_PATH "/../cms_static"
It is important here that the prefixes are different. So you can not do:
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static" resources.view.concatenateHeadLink.map./static/admin = APPLICATION_PATH "/../cms_static"
Helper usage
In the place where you need to add script tags (layout or view), we write:
<?php echo $this->concatenateHeadScript(); ?>
and the output in html is:
<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>
The resulting
bff149a0b87f5b0e00d9dd364e9ddaa0.js file is the union of all scripts.
')
The file name is md5 from the original list of scripts and their modification time. Thus, after the initial generation of the caching file, the helper will not generate it again on subsequent hits. A new generation of a caching file will occur only if the list of files that we merge has changed or the modification time of one of them has changed.
With each new generation, a new caching file will be obtained, while the old file is not deleted, so it makes sense to periodically clean the directory with the cache, deleting all its contents.
More usage examples.
For the resulting file, you can specify the type (
application/javascript ) and the condition ( lt IE 7 ), similar to how they are specified in the appendFile method of the appendFile helper:
<?php echo $this->concatenateHeadScript('application/javascript', array('conditional' => 'lt IE 7')); ?>
the output will be:
<!--[if lt IE 7]><script type="application/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script><![endif]-->
When adding a script using the headScript helper:
$this->view->headScript()->appendFile('/static/script_no_concat.js'); You can specify the parameter noConcat, so that this script is inserted into the html with a separate tag. In this case, all files that were added before this file will be merged into one cache file, then script_no_concat.js will be inserted, then all scripts that were added after it will be merged into the second cache file, which will be added next:
$this->view->headScript()->appendFile('/static/js/script1.js'); $this->view->headScript()->appendFile('/static/js/script2.js'); $this->view->headScript()->appendFile('/static/js/script_no_concat.js', null, array('noConcat' => true)); $this->view->headScript()->appendFile('/static/js/script3.js'); $this->view->headScript()->appendFile('/static/js/script4.js');
at the exit:
<script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <script type="text/javascript" src="/static/js/script_no_concat.js"></script> <script type="text/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script>
While traversing the list of scripts to be merged, the helper checks the type of the added script to match the type of the resulting file, and if they are different, the current script is marked as noConcat:
$this->view->headScript()->appendFile('/static/script1.js', 'application/javascript'); $this->view->headScript()->appendFile('/static/script2.js'); // text/javascript $this->view->headScript()->appendFile('/static/script3.js', 'application/javascript'); $this->view->headScript()->appendFile('/static/script4.js'); // text/javascript
Now when calling the helper with the specified type of
application/javascript : <?php echo $this->concatenateHeadScript('application/javascript'); ?>
the output will be:
<script type="application/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- script2.js --> <script type="text/javascript" src="/static/js/script2.js"></script> <script type="application/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- script2.js script4.js --> <script type="text/javascript" src="/static/js/script4.js"></script>
and when called with the default type:
<?php echo $this->concatenateHeadScript(); ?>
the output will be:
<script type="application/javascript" src="/static/js/script1.js"></script> <script type="text/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- script1.js script3.js --> <script type="application/javascript" src="/static/js/script3.js"></script> <script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- script3.js -->
What about styles?
For CSS styles completely similar helper. Immediately config and examples.
resources.view.concatenateHeadLink.enable = true resources.view.concatenateHeadLink.cacheDir = APPLICATION_PATH "/../static/cache/" resources.view.concatenateHeadLink.cacheUri = /static/cache/ resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"
Adding files:
$this->view->headLink()->appendStylesheet('/static/css/style1.css'); $this->view->headLink()->appendStylesheet('/static/css/style2.css'); $this->view->headLink()->appendStylesheet('/static/css/style3.css');
Helper call:
<?php echo $this->concatenateHeadStylesheet(); ?>
at the exit:
<link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="screen" rel="stylesheet" type="text/css" >
Calling the helper with the media attribute (tv) and the condition (lt IE 9):
<?php echo $this->concatenateHeadStylesheet('tv', 'lt IE 9'); ?>
at the exit:
<!--[if lt IE 9]> <link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="tv" rel="stylesheet" type="text/css" > <![endif]-->
When adding a style file with $ extras attributes
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, $extras); It is automatically marked as noConcat.
If the media attribute (tv) of a file
$this->view->headLink()->appendStylesheet('/static/css/style1.css', 'tv'); different from media (application / javascript) final css <?php echo $this->concatenateHeadStylesheet('application/javascript'); ?> such a file is marked as noConcat.
When using conditions
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, 'lt IE 9'); The file is marked as noConcat.
You can manually tag a file as NoConcat like this:
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, array('noConcat' => true));
As an epilogue
I use these helpers in this bundle:
- In phpStorm, we configure automatic minification of scripts and styles using File Watchers.
- headScript and headLink helpers connect the scripts in the project so that the original files are inserted in the development mode, and the minified phpStorm are inserted in the production mode.
- In the views, we use the helpers described in the article, while deactivating them through the development part of the config.
As a result, we have in dev mode the original files of scripts and styles, each connected via a separate script / link tag, and in production mode, the minified versions combined into one file.
Source: https://habr.com/ru/post/212897/
All Articles