Helper combining scripts and styles in single file for the old ZF1
If you want for many added scripts:
the
instead:
the
to this:
the
then this article is for you.
Helper can be installed using composer:
the
or just download/clone from github: github.com/denis-isaev/ZendHeadConcat
In Bootsrap.php you need to add the path to the directory with the helper and prefix the name of the class:
the
In the apllication.ini add configuration helper:
the
Parameters description:
the
the
the
More real example:
the
the
If you have a web server there are several aliases for several directories with scripts, they should describe everything that the helper was able to find the files in all directories. Example:
the
It is important that the prefixes were different. You can't do that:
the
In the place where you need to add script tags (layout or view), write:
the
and output in html, get:
the
The resulting file
The file name is the md5 from the original list of scripts and their modification time. Thus, after the initial generation of caching file, for subsequent hits, the helper will not generate it again. A new generation of file caching will only happen if you have changed the list of files to combine, or change the modification time of one of them.
With each new generation will produce a new caching file, the old file is not deleted, so it's worth checking the directory for cache cleaning, removing all its contents.
For the result file you can specify the type (
the output will be:
the
When you add a script using the headScript helper:
the
output:
the
During traversal of the list of scripts to combine, the helper checks the type of the added script for match with type of the output file, and if they differ, then the current script is marked as noConcat:
Now when you call the helper with the specified type
the output will be:
and if you call with default type:
the output will be:
For CSS styles is completely similar to helper. From the configuration and examples.
the
Add files:
the
The call to helper:
the
output:
the
Call helper indicating media attribute(tv) and a condition(lt IE 9):
the
output:
the
When you add a style file with $extras with attributes
If the attribute media(tv) of a file
When using conditions
To manually mark a file as NoConcat:
the
Article based on information from habrahabr.ru
the
$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:
the
<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>
to this:
the
<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>
then this article is for you.
Installation helper
Helper can be installed using composer:
the
require: {
"denis-isaev/zend-view-helper-head-concatenate": "*@dev"
},
"repositories":[
{
"type":"git",
"url":"http://github.com/denis-isaev/ZendHeadConcat"
}
]
or just download/clone from github: github.com/denis-isaev/ZendHeadConcat
Configuration helper
In Bootsrap.php you need to add the path to the directory with the helper and prefix the name of the class:
the
$view- > addHelperPath(APPLICATION_PATH . '/../vendor/denis-isaev/zend-view-helper-head-concatenate/library/Iden/View/Helper/', 'Iden_View_Helper');
In the apllication.ini add configuration helper:
the
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"
Parameters description:
the
enable — on/off helper. If this parameter is set to false, the helper is himself returns the instance Zend_View_Helper_HeadScript and all script tags are rendered as usual.
cacheDir — path to directory which will be stored caching files.
cacheUri — the uri of the directory where will be stored files caching.
map — here you need to specify a line uri to the directory in which you stored the scripts.
Example:
the
resources.view.concatenateHeadScript.map./uri_path = APPLICATION_PATH "/../file_path"
means that the script attached with this url:the
$this->view->headScript ()- > appendFile('/uri_path/js/script1.js');
the file will be taken along the way:the
APPLICATION_PATH "/../file_path/js/script1.js"
More real example:
the
resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static"
$this->view->headScript ()- > appendFile('/static/js/script1.js');
the file will be taken along the way:the
APPLICATION_PATH "/../static/js/script1.js"
If you have a web server there are several aliases for several directories with scripts, they should describe everything that the helper was able to find the files in all directories. Example:
the
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"
resources.view.concatenateHeadLink.map./admin/static = APPLICATION_PATH "/../cms_static"
It is important that the prefixes were different. You can't do that:
the
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"
resources.view.concatenateHeadLink.map./static/admin = APPLICATION_PATH "/../cms_static"
because in this case, the URLs that match the second rule, come under the first.using the helper
In the place where you need to add script tags (layout or view), write:
the
<?php echo $this->concatenateHeadScript(); ?>
and output in html, get:
the
<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>
The resulting file
bff149a0b87f5b0e00d9dd364e9ddaa0.js
is a concatenation of all scripts. The file name is the md5 from the original list of scripts and their modification time. Thus, after the initial generation of caching file, for subsequent hits, the helper will not generate it again. A new generation of file caching will only happen if you have changed the list of files to combine, or change the modification time of one of them.
With each new generation will produce a new caching file, the old file is not deleted, so it's worth checking the directory for cache cleaning, removing all its contents.
usage examples.
For the result file you can specify the type (
application/javascript
) and the condition (lt IE 7
) by analogy with how they are specified in the method appendFile
helper in the headScript
:the output will be:
the
<!--[if lt IE 7]><script type="application/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script><![endif]-->
When you add a script using the headScript helper:
$this->view->headScript ()- > appendFile('/static/script_no_concat.js');
you can specify the noConcat option to this script is inserted in a separate html tag. In this case all files that were added before this file will be merged into one nesiruosiu file will then be inserted script_no_concat.js
, then all scripts that have been added after it will be connected to the second caching the file which will be added to the following:the
$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');
output:
the
<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>
During traversal of the list of scripts to combine, the helper checks the type of the added script for match with type of the output file, and if they differ, then the current script is marked as noConcat:
$this->view->headScript ()- > appendFile('/static/script1.js', 'application/javascript');
$this->view->headScript ()- > appendFile('/static/script2.js'); // default type of text/javascript
$this->view->headScript ()- > appendFile('/static/script3.js', 'application/javascript');
$this->view->headScript ()- > appendFile('/static/script4.js'); // default type of text/javascript
Now when you call the helper with the specified type
application/javascript
:<?php echo $this->concatenateHeadScript('application/javascript'); ?>
the output will be:
<script type="application/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- here all files to script2.js -->
<script type="text/javascript" src="/static/js/script2.js"></script>
<script type="application/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- here all files between script2.js and script4.js -->
<script type="text/javascript" src="/static/js/script4.js"></script>
and if you call with 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> <!-- here all files between script1.js and script3.js -->
<script type="application/javascript" src="/static/js/script3.js"></script>
<script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- here all files after script3.js -->
what about styles?
For CSS styles is completely similar to helper. From the configuration and examples.
the
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"
Add files:
the
$this->view->headLink()->appendStylesheet('/static/css/style1.css');
$this->view->headLink()->appendStylesheet('/static/css/style2.css');
$this->view->headLink()->appendStylesheet('/static/css/style3.css');
The call to helper:
the
<?php echo $this->concatenateHeadStylesheet(); ?>
output:
the
<link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="screen" rel="stylesheet" type="text/css" >
Call helper indicating media attribute(tv) and a condition(lt IE 9):
the
<?php echo $this->concatenateHeadStylesheet('tv', 'lt IE 9'); ?>
output:
the
<!--[if lt IE 9]>
<link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="tv" rel="stylesheet" type="text/css" >
<![endif]-->
When you add a style file with $extras with attributes
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, $extras);
, it automatically is marked as noConcat. If the attribute media(tv) of a file
$this->view->headLink()->appendStylesheet('/static/css/style1.css', 'tv');
differs from media(application/javascript) final css<?php echo $this->concatenateHeadStylesheet('application/javascript'); ?>
this 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. To manually mark a file as NoConcat:
the
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, array('noConcat' = > true));
epilogue
I use these helpers in this set:
the - In phpStorm custom automatic minification scripts and styles using File Watchers.
the - headScript and headLink helpers plug-in scripts in the project so that in development mode, you insert the original files, and in production minified phpStorm.
the - In the vyuha use described in the article, the helpers, thus deactivate them through development part of the config.
In the end we have in dev mode, the original files of scripts and styles, each connected through a separate script tag/link, and in production mode — concatenated into a single file minified version.
Комментарии
Отправить комментарий