Bonsoir à tous,
Après un moment d'absence, je vais vous présenter comment installer YUI Compressor, et l'utiliser. Mais nous allons tout d'abord voir à quoi cela peut il servir ...
I. Introduction
YUI compressor a été développé par Julien Lecomte, il y a pas mal de temps, c'est à dire lors de YUI 2.0 (à vérifié...) En tout cas, son script est toujours apprécié et rend service à bien des développeur comme moi. YUI Compressor a été développé sous Java et permet de compresser des codes javascript. YUI Compressor est très utilisé pour des applications full-javascript ou le code peut aller à plusieurs centaines de milliers octets ! Mais aussi pour compresser des fichiers css(en enlevant tout le superflu). Je crois que la moyenne de compression est un facteur 44%, ce qui est plutôt pas mal ... !
II. Installation
Vous vous rendez sur la page suivante et vous téléchargez YUI Compressor.
page de téléchargementA la racine de votre répertoire d'application (ou se trouve le répertoire "system" de CodeIgniter), vous allez créer le répertoire 'lib','min', et 'js'. Afin d'avoir un environnement plus développé, vous pouvez créer un répertoire 'media' ou vous mettrez tous les fichiers media, c'est à dire images, musics, et videos (créez les répertoires correspondants).
Vous ajouterez de plus le répertoire 'yuiCompressor', dans lequel vous décompresserez votre fichier zip.
on aura donc une arborescence de la manière suivante:
|- js
|- lib
|- yuiCompressor
|- media
|- images
|- musics
|- videos
|- min
|- system (répertoire de CodeIgniter)
le répertoire 'js' est votre répertoire de développement javascript,et le répertoire 'min' deviendra le lieu ou seront stocké vos fichier compréssés...
Maintenant, Il faut installer une partie de mon framework maison qui se nomme 'Corus'.
donc dans le répertoire system de Codeigniter, il faut aller sur lib et créer un répertoire 'corus' et vous mettrez le fichier explorer.php et yuiComressor.php. Le premier permet de récupérer l'arborescence d'un répertoire ainsi que tous ses fichiers existants, et le deuxième permet d'effectuer une compression javascript ou css.
ps :
N'oubliez pas de rajouter les balise php !!!voici le contenu des deux fichiers:
explorer.php
class explorer {
public $file = array();
public $dir = array();
public function __construct($path){
$this->mklist($path);
}
public function mklist($p) {
if(is_array($p) && isset($p{'path'}))
$path = $p{'path'};
else $path = $p;
if ($dir = opendir($path)) {
while($file = readdir($dir)) {
if($file!='.' && $file!='..'){
if(is_file("$path/$file"))
$this->file[] = "$path/$file";
if(is_dir("$path/$file"))
$this->dir[] = "$path/$file";
}
if(is_dir("$path/$file") && !in_array($file, array(".","..")))
$this->mklist("$path/$file");
}
closedir($dir);
}
}
}
yuiCompressor.php
/**
* Définir la version de yui compressor
* La version se trouve dans le nom du fichier yusiCompressor/build/yuicompressor-x.y.z.jar
* la forme est : x.y.z ou x,y,z sont des chiffres
*/
define('YUI_COMPRESSOR_VERSION','2.4.2');
class yuiCompressor {
public $directories = array();
public $files = array();
private $debugExist = false;
public $nom = '';
/*
Constructeur
*/
public function __construct($name=''){
if(empty($name))
$name = 'default';
$this->nom = $name{'name'};}
/*
Effacer les repertoire et fichiers ...
*/
public function delete(){
$this->directories = array();
$this->files = array();
$this->debugExist = false;
}
/*
Ajout d'un répertoire
*/
public function addDir($dir=''){
try{
if(empty($dir))
throw new Exception('argument vide');
if(!file_exists($dir))
throw new Exception('Repertoire inexistant');
$this->directories[] = $dir;
// Récupération de tous les fichiers à partir des repertoires selectionnés par l'utilisateur
$ci = & get_instance();
$param{'path'} = $dir;
if(!isset($ci->explorer))
$ci->load->library('corus/explorer',$param);
else
$ci->explorer->mklist($param);
$temp = $ci->explorer->file;
foreach($temp as $v)
$this->files[] = $v;
return true;
}
catch(Exception $e){
return '< pre>'.$e.'';
}
}
/*
Ajout d'un fichier
*/
public function addFile($file){
try{
if(empty($file))
throw new Exception('argument vide');
if(!file_exists($file))
throw new Exception('Fichier inexistant');
$this->files[] = $file;
return true;
}
catch(Exception $e){
return '< pre>'.$e.'';
}
}
/*
Création du fichier *.debug.js
*/
private function generateDebug($option,$type){
try{
$liste = array();
$ci = & get_instance();
// Efface le fichier précompilé si il existe
$path = FCPATH;
if(file_exists($path.'min/'.$this->nom.'.debug.'.$type.'.'.$option))
unlink($path.'min/'.$this->nom.'.debug.'.$type.'.'.$option);
// Vérification qu'il n y a pas de doublons
$verif = array();
foreach($this->files as $el){
if(array_search($el,$verif)===false && substr($el,strlen($option)*(-1)-1)=='.'.$option )
$verif[] = $el;
}
$this->files = $verif;
$this->directories = array();
if(empty($this->files))
throw new Exception('Aucun fichier trouvé');
// Création du fichier
$temp = '';
foreach($this->files as $v){
$temp .= file_get_contents($v);}
file_put_contents($path.'min/'.$this->nom.'.debug.'.$type.'.'.$option,$temp);
$this->debugExist = true;
return true;
}
catch(Exception $e){
return '< pre>'.$e.'';
}
}
/*
Création du fichier *.min.js
*/
private function generateMin($option,$type){
try{
// Supprime la dernière version du fichier
$path = str_replace('system/','',BASEPATH);
if(file_exists($path.'min/'.$this->nom.'.min.'.$type.'.'.$option))
unlink($path.'min/'.$this->nom.'.min.'.$type.'.'.$option);
// Création de la requête
$version = YUI_COMPRESSOR_VERSION;
$entre = $path.'min/'.$this->nom.'.debug.'.$type.'.'.$option;
$sortie = $path.'min/'.$this->nom.'.min.'.$type.'.'.$option;
$cmd = "java -jar ".$path."lib/yuiCompressor/build/yuicompressor-$version.jar $entre -o $sortie --charset utf-8";
exec($cmd,$out);
if(!empty($out))
throw new Exception('Erreur dans l\'execution de la commande');
return true;
}
catch(Exception $e){
return '< pre>'.$e.'';
}
}
/*
Minifier les fichiers
option : js ou css
type: mobile ou page
*/
public function min($option,$type){
try{
// type de page invalide
if($type!='page' && $type!='mobile')
throw new Exception('type de page invalide');
// Extension du fichier invalide
if($option!='js' && $option!='css')
throw new Exception('Extension de fichier invalide');
// si pas de fichier
if(empty($this->directories) && empty($this->files) ){
throw new Exception('pas de fichier');}
// création du fichier *.debug.js
$this->generateDebug($option,$type);
if($this->debugExist!==true)
throw new Exception('Erreur dans la création de *.debug.js');
// création du fichier *.min.js
$this->generateMin($option,$type);
return true;
}
catch(Exception $e){
return '< pre>'.$e.'';
}
}
}
Retenez que pour utiliser yuiCompressor, il vous faudra explorer.php ! (sinon, rien ne marchera ...)
Voila, nous somme arrivé au terme de notre installation ! Et nous allons pouvoir faire nos premiers compressions!
pour ceux qui utilise Linux, il faudra faire une modification à la fonction generateMin et modifier le contenu de la variable $cmd. Pour cela, il fau se référé à la documentation yui compressor.
III.Utilisation
L'utilisation est plutôt simple, et se décompose en 4 parties:
1. Appel de la librairie yui compressor
Dans une fonction d'une classe de parent Controller
mettre :
$this->load->library('corus/yuiCompressor',$param);
2. Ajouter les fichiers ou répertoire de votre projet javascript:
$path = 'PATHFC.'js/index';
$this->yuicompressor->addDir($path);//exemple d'ajout de répertoire
$this->yuicompressor->addFile($path.'/toto.js');// exemple d'ajout de fichier javascript
3. Action ! compresser les fichier en 1 seul fichier :
$this->yuicompressor->min('js');
4. Optionnel, si vous devez compressez en plusieurs fichiers, utlisez :
$this->yuicompressor->delete();
entre les différentes phases de compression
Commentaire: pour compresser des fichiers css, à l'étape 3, il faudra simplement remplacer 'js' par 'css'. Remarquons, que la classe yuiCompressor, sera distinguer les type de fichiers js du css !
Vous remarquerez les fichiers compressé sont dans le répertoire min !
vous avez une extension .debug.js (ou .debug.css) (qui est simplement un agglomérat des fichiers ajouté les uns aux autres)
et les extensions (.min.js ou .min.css) étant les fichier compressé et à utiliser en production... !
IV Conclusion
Nous avons vu comment compresser des fichiers javascript et css avec yui Compressor. Les fichiers compressés avec une compression zip (deflate) deviennent au final la meilleurs solution en terme de rapidité de chargement d'une application web full javascript !
imaginez ce module associé à extjs + Sencha Touch +
intégration de la librairie Zend sur CodeIgniter, et vous obtiendrez un outil de développement ultra efficace !
nous verrons justement comment intégré extjs et sencha Touch sur CodeIgniter ... !
A très bientot
Takitano !
