De a törpök webfejlesztők élete nem csak játék és mese. Hallottál már a gonoszról, a csúf kopasz Hókuszpókról kivénhedt, minden szempontból túlhaladott, vénséges vén Internet Explorer 6-ról?
Ma délután egy életre megtanultam: Ha IE6-ban nem jelenik meg a Thickbox által megjelenített kép, akkor nagy valószínűséggel a body tagra be van állítva a position: relative; szabály. Kivéve/hatástalanítva egyből szép lesz minden.
Az ötlet, után megoldottuk a JavaScript tömörítését a JavaScript Packer, majd a CSS tömörítést is a CSSTidy segítségével.
Most nézzük a végeredményt, és a használatát
/**
* headerFiles
*
* #:#h5BonU3V#:#param Array $files A gyorstárazandó állományok listája
* #:#h5BonU3V#:#param String $mode 'script|css'
* #:#h5BonU3V#:#param String $fileType 'one|list'
* #:#h5BonU3V#:#param String $prefix A hivatkozás elé szánjuk
* #:#h5BonU3V#:#param mixed $compress Tömörítés mértéke
* #:#h5BonU3V#:#copyright Copyright (c) 2008 Vince Tikasz
* #:#h5BonU3V#:#license http://creativecommons.org/licenses/by-nc-sa/2.5/ Attribution-Noncommercial-Share Alike 2.5 Generic
* #:#h5BonU3V#:#version 2008-02-25 08:30
*/
function headerFiles( array $files, $mode, $fileType, $prefix, $compress = 62 ) {
if ( count( $files ) > 0) {
// Ha csak listázunk, akkor a fájltípusnak megfelelő hivatkozást szúrjuk be a kódba
if ( $mode == 'list' ) {
foreach ( $files as $f ) {
if ( $fileType == 'css' ) {
echo '<link rel="stylesheet" type="text/css" href="'. $prefix.$f.'" />';
}
elseif ( $fileType == 'script' ) {
echo '<script type="text/javascript" src="'. $prefix.$f.'"></script>';
}
}
}
elseif ( $mode == 'one' ) {
//Összeállítjuk a kiszolgálandó állomány elérési útját és nevét
$dirname = dirname($_SERVER['SCRIPT_FILENAME']);
$extension = $fileType == 'script' ? 'js' : 'css';
$Hashes = array();
foreach ( $files as $f ) {
$Hashes[] = sha1_file( $dirname.$f );
}
$name = sha1( join(';#%#;', $Hashes) );
$fileName = "{$dirname}/public/cache/{$name}.{$extension}";
// Ha nem létezik, akkor a források valamelyike változott.
// Le kell generálni a kiszolgálandó állományt
if ( !is_file( $fileName ) ) {
$Content = '';
// Beolvassuk az állományok tartalmát
foreach ( $files as $f ) {
if ( is_file( $dirname.$f ) ) {
$Content .= "/*START file: {$f}*/\n";
$Content .= file_get_contents( $dirname.$f );
$Content .= "\n/*//END file: {$f}*/\n";
}
}
// És a megfelelő eszközzel tömörítjük
if ( $fileType == 'script' && strval(0) != strval($compress) ) {
require_once( 'class.JavaScriptPacker.php' );
$packer = new JavaScriptPacker($Content, $compress, true, false);
$Content = $packer->pack();
}
elseif ( $fileType == 'css' && strval(0) != strval($compress) ) {
require 'csstidy/class.csstidy.php';
$Css = new csstidy();
$Css->set_cfg('remove_bslash', 1 );
$Css->set_cfg('compress_colors', 1 );
$Css->set_cfg('compress_font-weight', 1 );
$Css->set_cfg('optimise_shorthands', 1 );
$Css->set_cfg('remove_last_;' , false );
$Css->set_cfg('case_properties' , 1 );
$Css->set_cfg('merge_selectors', 2 );
$Css->set_cfg('css_level', 'CSS2.1' );
if ( $compress == 10 || $compress == 'Numeric' || $compress == 'low_compression' ) {
$Css->load_template( 'low_compression' );
}
elseif ( $compress == 62 || $compress == 'Normal' || $compress == 'high_compression' ) {
$Css->load_template( 'high_compression' );
}
elseif ( $compress == 95 || $compress == 'High ASCII' || $compress == 'highest_compression' ) {
$Css->load_template( 'highest_compression' );
}
else {
$Css->load_template( 'default' );
}
$Css->parse( $Content );
$Content = $Css->print->plain();
}
// A végeredményt eltároljuk...
file_put_contents( $fileName, $Content );
}
// A már létező állományt pedig kiszolgáljuk
headerFiles( array( "/public/cache/{$name}.{$extension}" ), 'list', $fileType, $prefix );
}
}
}
A könyvtár szerkesztet:
<?php
$Scripts = array(
// mindig a jQuery, vagy az éppen aktuálisan használt könyvtár az első
'/public/script/jquery-1.2.3.js'
// jQuery Pluginok, Addonok
,'/public/script/jquery/form.js'
,'/public/script/jquery/superfish.js'
,'/public/script/jquery/tablesorter.pack.js'
,'/public/script/jquery/fckeditor.js'
,'/public/script/jquery/delegate.js'
,'/public/script/jquery/validate.js'
// és az utolsó a saját script
,'/public/script/sajat.script.js'
);
$CSS = array(
,'/public/style/superfish.css'
,'/public/style/menu.css'
,'/public/style/selectbox.css'
,'/public/style/thickbox.css'
// saját CSS
,'/public/style/sajat.css'
);
headerFiles( $Scripts, 'one', 'script' );
headerFiles( $CSS, 'one', 'css' );
Van ugye a jQuery.
Van hozzá egy “form” és egy “validate” plugin, akiket össze kell házasítani.
$(function(){
$("form").submit(function(){
var options = {
// dataType: 'json',
// success: function(data,status){ //mit is kezdjünk a válasszal }
// és a többi ajaxForm beállítási lehetőség
};
if( $(this).valid() ){
$(this).ajaxSubmit( options );
}
return false;
}
});
Már elértük, hogy csak egy állományt kell kiszolgálni. Már tömörítettünk a JavaScript kódot is. Következik a CSS kód tömörítése. Szerencsére már erre a feladatra is létezik kész megoldás a CSSTidy formájában. Használata a JS tömörítőhöz hasonlóan egyszerű
$in = file_get_contents( 'my.css' );
require 'class.csstidy.php';
$Css = new csstidy();
$Css->load_template( 'high_compression' );
$Css->parse( $in );
$out = $Css->print->plain();
file_put_contents( 'my.compressed.css', $out );
És a módosítások után a így néz ki a függvényünk:
function headerFiles( array $files, $mode, $fileType, $prefix, $compress = 62 )
{
if ( count( $files ) > 0) {
if ( $mode == 'list' ) {
foreach ( $files as $f ) {
if ( $fileType == 'css' ) {
echo '<link rel="stylesheet" type="text/css" href="'. $prefix.$f.'" />';
} elseif ( $fileType == 'script' ) {
echo '<script type="text/javascript" src="'. $prefix.$f.'"></script>';
}
}
} elseif ( $mode == 'one' ) {
$dirname = dirname($_SERVER['SCRIPT_FILENAME']);
$extension = $fileType == 'script' ? 'js' : 'css';
$Hashes = array();
foreach ( $files as $f ) {
$Hashes[] = sha1_file( $dirname.$f );
}
$name = sha1( join(';#%#;', $Hashes) );
$fileName = "{$dirname}/public/cache/{$name}.{$extension}";
if ( !is_file( $fileName ) ) {
$Content = '';
foreach ( $files as $f ) {
if ( is_file( $dirname.$f ) ) {
$Content .= "/*START file: {$f}*/\n";
$Content .= file_get_contents( $dirname.$f );
$Content .= "\n/*//END file: {$f}*/\n";
}
}
if ( $fileType == 'script' && strval(0) != strval($compress) ) {
require_once( 'class.JavaScriptPacker.php' );
$packer = new JavaScriptPacker($Content, $compress, true, false);
$Content = $packer->pack();
}
elseif ( $fileType == 'css' && strval(0) != strval($compress) ) {
require 'csstidy/class.csstidy.php';
$Css = new csstidy();
$Css->set_cfg('remove_bslash', 1 );
$Css->set_cfg('compress_colors', 1 );
$Css->set_cfg('compress_font-weight', 1 );
$Css->set_cfg('optimise_shorthands', 1 );
$Css->set_cfg('remove_last_;' , false );
$Css->set_cfg('case_properties' , 1 );
$Css->set_cfg('merge_selectors', 2 );
$Css->set_cfg('css_level', 'CSS2.1' );
if ( $compress == 10 || $compress == 'Numeric' || $compress == 'low_compression' ) {
$Css->load_template( 'low_compression' );
} elseif ( $compress == 62 || $compress == 'Normal' || $compress == 'high_compression' ) {
$Css->load_template( 'high_compression' );
} elseif ( $compress == 95 || $compress == 'High ASCII' || $compress == 'highest_compression' ) {
$Css->load_template( 'highest_compression' );
} else {
$Css->load_template( 'default' );
}
$Css->parse( $Content );
$Content = $Css->print->plain();
}
file_put_contents( $fileName, $Content );
}
headerFiles( array( "/public/cache/{$name}.{$extension}" ), 'list', $fileType, $prefix );
}
}
}
Most, hogy már csak egy-egy állományt kell kiszolgálnunk, és a klienseknek letölteni, akár tovább is léphetünk. Tömörítsünk az összefűzött kódon. Második lépés tehát a JavaScript kód tömörítése. Én erre a feladatra a JavaScriptPacker-t ajánlom. Használata pofon egyszerű:
$in = file_get_contents( 'my.js' );
require_once( 'class.JavaScriptPacker.php' );
$packer = new JavaScriptPacker($in, 62, true, false);
$out = $packer->pack();
file_put_contents( 'my.compressed.js', $out );
Felhasználva ezt a pici kódot kicsit átalakítjuk a már meglévő függvényünket
function headerFiles( array $files, $mode, $fileType, $prefix, $compress = 62 ) {
if ( count( $files ) > 0) {
if ( $mode == 'list' ) {
foreach ( $files as $f ) {
if ( $fileType == 'css' ) {
echo '<link rel="stylesheet" type="text/css" href="'. $prefix.$f.'" />';
}
elseif ( $fileType == 'script' ) {
echo '<script type="text/javascript" src="'. $prefix.$f.'"></script>';
}
}
}
elseif ( $mode == 'one' ) {
$dirname = dirname($_SERVER['SCRIPT_FILENAME']);
$extension = $fileType == 'script' ? 'js' : 'css';
$Hashes = array();
foreach ( $files as $f ) {
$Hashes[] = sha1_file( $dirname.$f );
}
$name = sha1( join(';#%#;', $Hashes) );
$fileName = "{$dirname}/public/cache/{$name}.{$extension}";
if ( !is_file( $fileName ) ) {
$Content = '';
foreach ( $files as $f ) {
if ( is_file( $dirname.$f ) ) {
$Content .= "/*START file: {$f}*/\n";
$Content .= file_get_contents( $dirname.$f );í
$Content .= "\n/*//END file: {$f}*/\n";
}
}
if ( $fileType == 'script' && $compress > 0 ) {
require_once( 'class.JavaScriptPacker.php' );
$packer = new JavaScriptPacker($Content, $compress, true, false);
$Content = $packer->pack();
}
file_put_contents( $fileName, $Content );
}
headerFiles( array( "/public/cache/{$name}.{$extension}" ), 'list', $fileType, $prefix );
}
}
}
A függvényünk, kapott egy plusz paramétert, amivel beállíthatjuk a tömörítés mértékét. Ugyanúgy összeszedjük, és összefűzzük az állományok tartalmát, de ha script-ekkel dolgozunk, és a tömörítés mértéke nagyobb mint nulla, akkor a kírandó tartalmat tömörítjük.
