<?xml version="1.0" encoding="UTF-8"?><!-- generator="wordpress.com" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

<channel>
	<title>header-javascript &amp;laquo; WordPress.com Tag Feed</title>
	<link>http://en.wordpress.com/tag/header-javascript/</link>
	<description>Feed of posts on WordPress.com tagged "header-javascript"</description>
	<pubDate>Thu, 03 Dec 2009 20:19:19 +0000</pubDate>

	<generator>http://en.wordpress.com/tags/</generator>
	<language>en</language>

<item>
<title><![CDATA[PHP Class Header Files Handle]]></title>
<link>http://hlibco.wordpress.com/2008/06/01/php-class-header-files-handle/</link>
<pubDate>Sun, 01 Jun 2008 19:05:53 +0000</pubDate>
<dc:creator>hlibco</dc:creator>
<guid>http://hlibco.wordpress.com/2008/06/01/php-class-header-files-handle/</guid>
<description><![CDATA[Escrevi uma classe para manusear a inclusão dos arquivos CSS e Javascript no cabeçalho das páginas. ]]></description>
<content:encoded><![CDATA[<div class='snap_preview'><p>Escrevi uma classe para manusear a inclusão dos arquivos CSS e Javascript no cabeçalho das páginas. Ele funciona da seguinte maneira:</p>
<p>Imagina que você tenha 10 arquivos CSS, e queira substituir estas 10 inclusões (http_requests) por apenas 2 inclusões. Ou seja, 2 arquivos CSS onde cada um deles tenha embutido, o conteúdo de 5 dos arquivos anteriores. Bom, legal, se fosse só pra isso, bastaria você utilizar uma classe de PHP Minify por exemplo a do <a title="Classe PHP para Minify JS e CSS" href="http://www.vulgarisoip.com/2007/06/21/minify-your-external-javascript-and-css-with-php/" target="_blank">VulgarisOverIp</a>.</p>
<p>Mas a grande jogada aqui está no agrupamento dos arquivos, ou seja, você conseguir definir quaise arquivos estarão juntos em cada Package (para fazer o balanceamento de requests x peso por arquivo). E flexibilizar o REBUILD de cada package específico, caso 1 dos arquivos do pacote seja atualizado no futuro (não sendo necessário assim, re-criar todos os pacotes).</p>
<p>O <strong>resultado final</strong> desta classe PHP é:</p>
<div class="custom_box_1">&#60;!&#8211; EMBEDED SCRIPTS CSS *************************************************** &#8211;&#62;<br />
&#60;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;http://www.exemplo.com/css/style.pk0.min_v.1.0.css&#8221; media=&#8221;screen&#8221;/&#62;<br />
&#60;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;http://www.exemplo.com/css/style.pk1.min_v.1.0.css&#8221; media=&#8221;screen&#8221;/&#62;</p>
<p>&#60;!&#8211; EMBEDED SCRIPTS JAVASCRIPT ******************************************** &#8211;&#62;<br />
&#60;script type=&#8221;text/javascript&#8221; src=&#8221;http://www.exemplo.com/js/javascript.pk0.min_v.1.0.js&#8221;&#62;&#60;/script&#62;<br />
&#60;script type=&#8221;text/javascript&#8221; src=&#8221;http://www.exemplo.com/js/javascript.pk1.min_v.1.0.js&#8221;&#62;&#60;/script&#62;<br />
&#60;script type=&#8221;text/javascript&#8221; src=&#8221;http://www.exemplo.com/js/javascript.pk2.min_v.1.0.js&#8221;&#62;&#60;/script&#62;</p>
</div>
<p>Olhando um pouco mais de perto, a estrutura funciona assim:</p>
<blockquote><p>//Include the header files handle class file<br />
include(PATH_CLASSES .&#8217;/class.headerfiles.php&#8217;);<br />
$hFiles                  = new HeaderFiles;<br />
$hFiles-&#62;path_root_CSS   = &#8216;root/www/site/css&#8217;;<br />
$hFiles-&#62;path_root_JS    = &#8216;root/www/site/js&#8217;;<br />
$hFiles-&#62;path_public_CSS = &#8216;http://www.example.com/css&#8217;;<br />
$hFiles-&#62;path_public_JS  = &#8216;http://www.example.com/js&#8217;;</p>
<p>// Setting the 2 packages of CSS files &#8211; do not use the enxtension file: .css (if the name is: style.css, just use style)<br />
define(&#8216;VERSION_CSS&#8217;, &#8216;1.0&#8242;);<br />
define(&#8216;SCRIPTS_CSS&#8217;, serialize(array(<br />
&#8216;0&#8242;=&#62;array(&#8216;file1&#8242;,<br />
&#8216;file2&#8242;,<br />
&#8216;1&#8242;=&#62;array(&#8216;file3&#8242;,<br />
&#8216;file4&#8242;,<br />
&#8216;file5&#8242;)<br />
)));<br />
define(&#8216;REBUILD_CSS&#8217;, serialize(array(&#8216;*&#8217;)));</p>
<p>// Generating Embeded CSS<br />
$EMBEDED_SCRIPT_CSS = $hFiles-&#62;SetIncludeFiles(unserialize(SCRIPTS_CSS),&#8217;css&#8217;,VERSION_CSS,&#8217;site&#8217;,unserialize(REBUILD_CSS));</p>
<p>// Generating Embeded Javascript<br />
// $EMBEDED_SCRIPT_JS  = $hFiles-&#62;SetIncludeFiles(unserialize(SCRIPTS_JS),&#8217;js&#8217;,VERSION_JS,&#8217;site&#8217;,unserialize(REBUILD_JS));</p>
<p>echo $EMBEDED_SCRIPT_CSS;<br />
// result: &#60;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;&#8230;&#8230;</p></blockquote>
<p>Para o caso do CSS, esta classe faz a função de MINIFY, retirando comentários e espaços em branco desnecessários dos arquivos CSS de origem. Porém, para os arquivos Javascript, ela apenas agrupa os arquivos dentro dos pacotes, sem fazer nenhuma alteração neles (reduzindo apenas o número de requisições HTTP).</p>
<p><strong>O quê pode melhorar?</strong></p>
<ul>
<li>Incluir a chamada de alguma classe de MINIFY de Javascript, a fim de reduzir o tamanho (Kb) dos pacotes gerados.</li>
</ul>
<p>Abaixo está o<strong> código completo</strong> da classe:</p>
<div class="custom_box_2">&#60;?php</p>
<p>/**<br />
* Project:     headerFiles<br />
* File:        class.headerfiles.php<br />
*<br />
* Description:<br />
*<br />
* This class is used to manage CSS and JAVASCRIPT files in the header of the page.<br />
* The main feature is not to compress or minify CSS and JS (but this class also do it).<br />
*<br />
* I was focused on really manage this files, what I mean is: Imagine that you<br />
* have a set of 10 CSS files and 10 JS files, and you want to JOIN them into<br />
* 2 packages of 5 files each. (CSS: pk0 , pk1 &#8211; JS: pk0, pk1)<br />
*<br />
* When you should to update one of these 5 files (of each pack), you can just<br />
* rebuild the package number what it is inside (not the both package).<br />
*<br />
* With this class you can MINIFY some CSS files and JOIN JS files into some packages containing<br />
* a certain number of files inside it.<br />
*<br />
* More practical:<br />
define(&#8216;VERSION_CSS&#8217;, &#8216;1.0&#8242;);<br />
define(&#8216;SCRIPTS_CSS&#8217;, serialize(array(<br />
&#8216;0&#8242;=&#62;array(&#8216;file1&#8242;,<br />
&#8216;file2&#8242;,<br />
&#8216;1&#8242;=&#62;array(&#8216;file3&#8242;,<br />
&#8216;file4&#8242;,<br />
&#8216;file5&#8242;)<br />
)));<br />
define(&#8216;REBUILD_CSS&#8217;, serialize(array(&#8216;*&#8217;)));<br />
*<br />
* This will generate 2 Packages (pk0 and pk1), with these CSS files inside it, without comments &#8211; minify version)<br />
* The parameter &#8216;*&#8217; is used to rebuild ALL Packages or generate it at the first time.<br />
*<br />
* If someday you update your &#8216;file2.css&#8217;, just rebuild the package 2 [ serialize(array('2')) ]<br />
* or if you need to Rebuild more than one package, use: [ serialize(array('2','3','4')) ]<br />
*<br />
* @link http://hlibco.wordpress.com/<br />
* @author Felipe Hlibco &#60;hlibco at gmail dot com&#62;<br />
* @package Header<br />
* @version 1.0.0<br />
*/</p>
<p>/**<br />
*  USAGE EXAMPLE<br />
*  &#8212;&#8212;&#8212;&#8212;-</p>
<p>//Include the header files handle class file<br />
include(PATH_CLASSES .&#8217;/class.headerfiles.php&#8217;);<br />
$hFiles                  = new HeaderFiles;<br />
$hFiles-&#62;path_root_CSS   = &#8216;root/www/site/css&#8217;;<br />
$hFiles-&#62;path_root_JS    = &#8216;root/www/site/js&#8217;;<br />
$hFiles-&#62;path_public_CSS = &#8216;http://www.example.com/css&#8217;;<br />
$hFiles-&#62;path_public_JS  = &#8216;http://www.example.com/js&#8217;;</p>
<p>// Setting the 2 packages of CSS files &#8211; do not use the enxtension file: .css (if the name is: style.css, just use style)<br />
define(&#8216;VERSION_CSS&#8217;, &#8216;1.0&#8242;);<br />
define(&#8216;SCRIPTS_CSS&#8217;, serialize(array(<br />
&#8216;0&#8242;=&#62;array(&#8216;file1&#8242;,<br />
&#8216;file2&#8242;,<br />
&#8216;1&#8242;=&#62;array(&#8216;file3&#8242;,<br />
&#8216;file4&#8242;,<br />
&#8216;file5&#8242;)<br />
)));<br />
define(&#8216;REBUILD_CSS&#8217;, serialize(array(&#8216;*&#8217;)));</p>
<p>// Generating Embeded CSS<br />
$EMBEDED_SCRIPT_CSS = $hFiles-&#62;SetIncludeFiles(unserialize(SCRIPTS_CSS),&#8217;css&#8217;,VERSION_CSS,&#8217;site&#8217;,unserialize(REBUILD_CSS));</p>
<p>// Generating Embeded Javascript<br />
// $EMBEDED_SCRIPT_JS  = $hFiles-&#62;SetIncludeFiles(unserialize(SCRIPTS_JS),&#8217;js&#8217;,VERSION_JS,&#8217;site&#8217;,unserialize(REBUILD_JS));</p>
<p>echo $EMBEDED_SCRIPT_CSS;<br />
*<br />
*<br />
*<br />
*/</p>
<p>class HeaderFiles {</p>
<p>var $path_root_CSS;<br />
var $path_root_JS;<br />
var $path_public_CSS;<br />
var $path_public_JS;</p>
<p>/* Public: Include CSS and Javascript files in the header */<br />
/*<br />
PARAMETERS:<br />
$filenamePool: (string &#124; array)<br />
$fileType:     (string)  &#8216;css&#8217; &#124; &#8216;js&#8217;<br />
$version:      (string)<br />
$pack   :      (integer)  [0] Does not exists a default package [1] Exists a default package<br />
$rebuild:      (integer)  [0] Do not rebuild ths script [1] Rebuild the script<br />
*/<br />
function SetIncludeFiles($packageFiles, $fileType, $version = &#8216;1.0&#8242;, $object = &#8217;site&#8217;, $rebuild = 0)<br />
{<br />
/* Validate Version */<br />
if (empty($version)) { $version = &#8216;1.0&#8242;; }</p>
<p>/* Add file type default settings */<br />
if ($fileType == &#8216;css&#8217;)<br />
{<br />
$preName    = &#8217;style&#8217;;<br />
$pathPublic = $this-&#62;path_public_CSS;<br />
$pathRoot   = $this-&#62;path_root_CSS;<br />
}<br />
elseif ($fileType == &#8216;js&#8217;)<br />
{<br />
$preName    = &#8216;javascript&#8217;;<br />
$pathPublic = $this-&#62;path_public_JS;<br />
$pathRoot   = $this-&#62;path_root_JS;<br />
}</p>
<p>/* Identifying Object */<br />
if ($object != &#8217;site&#8217;)<br />
{<br />
$pathPublic .= &#8216;/&#8217; . $object;<br />
$pathRoot   .= &#8216;/&#8217; . $object;<br />
}</p>
<p>/* Get the files parsed */<br />
if (!is_array($filenamePool) &#38;&#38; !empty($filenamePool))<br />
{<br />
$filenamePool = array($filenamePool);<br />
}</p>
<p>/* For each file parsed into package, loop */<br />
foreach($packageFiles as $package=&#62;$files)<br />
{<br />
/* Generate the filename for each object type */<br />
if ($object == &#8217;site&#8217;)<br />
{<br />
$filename = $preName . &#8216;.pk&#8217; . $package . &#8216;.min_v.&#8217; . $version . &#8216;.&#8217; . $fileType;<br />
}<br />
else<br />
{<br />
/* Just allow 1 script file per object (film / filmclub / theater) */<br />
$filename = $packageFiles[0] . &#8216;.&#8217; . $fileType;<br />
}</p>
<p>/* Validate rebuild activation */<br />
if (!is_array($rebuild)) { $rebuild = array(); }</p>
<p>/* Rebuild some specified package or Re-generate all packages &#8216;*&#8217; */<br />
if (in_array($package,$rebuild) &#124;&#124; in_array(&#8216;*&#8217;,$rebuild))<br />
{<br />
/* Handle Files from diferent way */<br />
if ($fileType == &#8216;css&#8217;)<br />
{<br />
foreach($files as $file)<br />
{<br />
$content         = file_get_contents($pathRoot . &#8216;/&#8217; . $file . &#8216;.&#8217; . $fileType);<br />
$packageContent .= str_replace(&#8216;; &#8216;,&#8217;;',str_replace(&#8216; }&#8217;,'}&#8217;,str_replace(&#8216;{ &#8216;,&#8217;{&#8216;,str_replace(array(&#8220;\r\n&#8221;,&#8221;\r&#8221;,&#8221;\n&#8221;,&#8221;\t&#8221;,&#8217;  &#8216;,&#8217;    &#8216;,&#8217;    &#8216;),&#8221;",preg_replace(&#8216;!/\*[^*]*\*+([^/][^*]*\*+)*/!&#8217;,&#8221;,$content)))));<br />
}<br />
}<br />
elseif ($fileType == &#8216;js&#8217;)<br />
{<br />
foreach($files as $file)<br />
{<br />
$packageContent .= file_get_contents($pathRoot . &#8216;/&#8217; . $file . &#8216;.&#8217; . $fileType);<br />
}<br />
}</p>
<p>$fp = fopen($pathRoot . &#8216;/&#8217;.$filename, &#8216;w+&#8217;);<br />
fwrite($fp, $packageContent);<br />
fclose($fp);<br />
unset($packageContent);<br />
}</p>
<p>/* Generating Tag */<br />
if ($fileType == &#8216;css&#8217;)<br />
{<br />
$outputTag .= &#8216;&#60;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;&#8216; . $pathPublic . &#8216;/&#8217; . $filename . &#8216;&#8221; media=&#8221;screen&#8221;/&#62;&#8217; . &#8220;\r\n&#8221;;<br />
}<br />
elseif ($fileType == &#8216;js&#8217;)<br />
{<br />
$outputTag .= &#8216;&#60;script type=&#8221;text/javascript&#8221; src=&#8221;&#8216; . $pathPublic . &#8216;/&#8217; . $filename . &#8216;&#8221;&#62;&#60;/script&#62;&#8217; . &#8220;\r\n&#8221;;<br />
}<br />
}</p>
<p>/* Return the content */<br />
return $outputTag;<br />
}</p>
<p>}<br />
?&#62;</p>
</div>
</div>]]></content:encoded>
</item>

</channel>
</rss>
