Helper combining scripts and styles in single file for the old ZF1

If you want for many added scripts:
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
  1. In phpStorm custom automatic minification scripts and styles using File Watchers.
  2. the
  3. 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.
  4. the
  5. 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.
Article based on information from habrahabr.ru

Комментарии

Популярные сообщения из этого блога

Briefly on how to make your Qt geoservice plugin

Database replication PostgreSQL-based SymmetricDS

Yandex.Widget + adjustIFrameHeight + MooTools