Combiner des javascripts

Combiner des javascripts - HTML/CSS - Programmation

Marsh Posté le 15-09-2009 à 15:28:35    

Bonjour,

 

Je souhaitais combiner plusieurs javascript que j'utilise sur mes pages, seulement à mon grand malheur, rien n'y fait, pourtant selon google, ma référence  :lol: il n'y a rien de spécial à faire.

 

J'ai testé deux méthode, la première manuellement, j'ai copié collé les différents codes ; la seconde avec un script php combine.php, il fait pareil en plus avancé et donc même résultat, une page avec l'ensemble de mes script est appelé et rien ne s'exécute.

 

Cherchant à le faire avec 3 scripts, j'ai testé de combiner le 1 et le 2, le 1 et le 3 ainsi que le 2 et le 3 afin de voir si l'un d'entre eux posait problème. Même résultat.

 

Les scripts cohabitent bien puisque si je les lance séparément il n'y a aucun soucis.

 

Je vous met ce que j'ai tenté, ce qui vous donnera aussi le nom des script que j'utilise :

 
Code :
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/zoombox.js"></script>
  3. <script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>


La base, qui marche

 
Code :
  1. <script type="text/javascript" src="js/javascript.js"></script>


regroupement manuel qui ne marche pas

 
Code :
  1. <script type="text/javascript" src="javascript/jquery.js,zoombox.js,flowplayer-3.1.4.min.js"></script>


regroupement par url rewritting qui amène au script combine.php qui m'en ressort un unique fichier js et évidemment, ne marche pas ;)

 

Si vous avez une idée du pourquoi de la chose.


Message édité par Backup95 le 15-09-2009 à 15:31:29
Reply

Marsh Posté le 15-09-2009 à 15:28:35   

Reply

Marsh Posté le 15-09-2009 à 15:33:24    

Faut regarder ce qui est envoyé par le serveur [:petrus75]

Reply

Marsh Posté le 15-09-2009 à 16:06:51    

pour te donner une idée, sur le projet que j'ai sous la main, ça a été fait comme ça :

Code :
  1. <?php
  2.  
  3. header("Content-type: text/javascript" );
  4.  
  5. $lstCss=array();
  6. $lstCss[]="script1.js";
  7. $lstCss[]="script2.js";
  8. $lstCss[]="script3.js";
  9. (...)
  10.  
  11. $out="";
  12. foreach($lstCss as $f)
  13.     $out.=file_get_contents('./'.$f);
  14.  
  15. $out=str_replace("\t\t", " ", $out);
  16. $out=str_replace("\n", " ", $out);
  17. $out=str_replace("\r", " ", $out);
  18. $out=str_replace("\0", " ", $out);
  19. $out=str_replace("\x0B", " ", $out);
  20. $out=str_replace("    ", " ", $out);
  21. $out=str_replace("  ", " ", $out);
  22.  
  23.  
  24. echo $out;
  25. ?>


dans le cas présent, garre au commentaires "//", ça concatène le js sur une seule ligne (via les str_replace)
après, c'était comme ça quand j'ai repris le truc, j'ai pas chercher à voir si y'avait mieux, mais ça me parait pas mal
 
puis après ben <script type="text/javascript" src="le_script_du_dessus.php" ></script>


---------------
Site photo - FlickR - G+ - Fb
Reply

Marsh Posté le 15-09-2009 à 17:12:11    

Salut florent et gugus,

 

D'après javascript debugger (module firefox), j'ai quand ça marche (donc fichiers séparé), ces 3 fichiers :
http://dl.free.fr/osaI0LInW
http://dl.free.fr/p7dXThSxh
http://dl.free.fr/rtJkOUYpe
Et quand ça ne marche pas, l'exemple a été fait avec combine.php :
http://dl.free.fr/tmmQo7qPH
Et celui ci manuellement :
http://dl.free.fr/gN2g8lOLu
Donc c'est la même chose qui est envoyé par le serveur (si c'est bien ça que javascript debugger me donne).

 

Le problème n'est pas la compression puisque dans le second cas (celui fait manuellement) c'est juste du copié collé des 3 premiers fichiers. donc ça revient à faire comme ton exemple gugus en enlevant les lignes 14 à 21.
Précision, je travaille en local avec wamp.


Message édité par Backup95 le 15-09-2009 à 17:15:49
Reply

Marsh Posté le 15-09-2009 à 17:23:31    

t'as regardé avec une console js ce qui se passait? Genre avec firebug, il te met pas une erreur js qui pourrait te mettre sur la voie?
essais de désactiver le cache, rafraichir avec CTRL-F5 entre chaque modif.


---------------
Site photo - FlickR - G+ - Fb
Reply

Marsh Posté le 15-09-2009 à 17:51:33    

Je ne sais pas m'en servir...
Dans console j'ai : reload ta activate windows...
Dans script si je selectionne global.js j'ai rien de particulier, mon code en noir c'est tout.
Dans dom j'ai deux indication en rouge : $ (et fx si je déploie $) et jQuery (et fx si je déploie jQuery)
 
Le fait que les 3 scripts ne soient pas concaténée et compressé de la même manière peut jouer.
jquery c'est encodé puisque ce n'est pas la version développeur.
Le second seul les retraits et les saut ont été enlevé.
Le troisième les espace ont été aussi supprimé.
 
Je ne pense pas que ça joue, surtout que les deux derniers sont similaires finalement et que même en ne mettant que ces deux script ensemble et jquery dans un fichier à part, ça ne change rien.

Message cité 1 fois
Message édité par Backup95 le 15-09-2009 à 18:01:18
Reply

Marsh Posté le 15-09-2009 à 17:59:41    

regardes avec cette console là qui s'active en cliquant sur les boutons entourés en rouge :
http://img179.imageshack.us/img179/174/consoleb.jpg
par contre je sais plus si elle viens avec webdeveloper ou firebug


---------------
Site photo - FlickR - G+ - Fb
Reply

Marsh Posté le 15-09-2009 à 18:10:57    

J'ai des erreurs partout :/
 
 
lié à zoombox apparemment puisque ça reprend la partie zoombox du code (il me dise que ce n'est pas une fonction) et j'ai des : zoombox is not defined. J'ai aussi du flowplayer is net defined et une entité non définie : jar:file:(...)globalBindings.xml
 
Ca fait peur webdeveloper :D

Reply

Marsh Posté le 15-09-2009 à 18:18:47    

tu les a bien mis dans le bon ordre?


---------------
Site photo - FlickR - G+ - Fb
Reply

Marsh Posté le 15-09-2009 à 18:29:00    

Tous les fichier dans global :
si je place flowplayer en premier et jquery en second ou zoombox en second, flowplayer marche, zoombox non.
Dans tous les autres cas rien marche
 
Le fichier zoombox à part.
Si je le met devant global ça ne marche pas, après global.js, zoombox marche, mais flowplayer marche pas.
 
En premier lieu je les avais placé dans le même ordre que lorsque j'avais les fichiers séparé (donc jquery, zoombox, flowplayer) et rien ne marchait.
 
Donc peut être un problème d'ordre mais là ej suis perdu car aucun ordre ne fais tout marché.

Reply

Marsh Posté le 15-09-2009 à 18:29:00   

Reply

Marsh Posté le 15-09-2009 à 18:38:34    

Jsuis gavé, jcapte pas. Jvais faire autrement, merci pour votre aide. Si une personne a eu le même problème et a la solution je vais suivre ce topic mais pour ma part j'ai assez perdu de temps avec ça.

Reply

Marsh Posté le 15-09-2009 à 23:46:38    

Backup95 a écrit :

Je ne sais pas m'en servir...
Dans console j'ai : reload ta activate windows...
Dans script si je selectionne global.js j'ai rien de particulier, mon code en noir c'est tout.
Dans dom j'ai deux indication en rouge : $ (et fx si je déploie $) et jQuery (et fx si je déploie jQuery)
 
Le fait que les 3 scripts ne soient pas concaténée et compressé de la même manière peut jouer.
jquery c'est encodé puisque ce n'est pas la version développeur.
Le second seul les retraits et les saut ont été enlevé.
Le troisième les espace ont été aussi supprimé.
 
Je ne pense pas que ça joue, surtout que les deux derniers sont similaires finalement et que même en ne mettant que ces deux script ensemble et jquery dans un fichier à part, ça ne change rien.


 
Salut
 
La minification des fichiers JS est classique (on vires les espaces, les comments, etc.. pour économiser de la bandes passantes et du temps de DL), en théorie ca ne pose pas de problème, le parser se démerde tres bien sans les "blancs". Par contre, il se peut qu'il faut charger les fichiers dans un ordre particulier, un script faisant appel à un autre, etc...
 
Pour FireBug, si tu as ce message d'affiché, fait simplement CTRL+R pour recharger la page et donc avoir qqch dans la console.
 
Sinon il existe des scripts (online ou offline) tout fait pour combiner les fichiers JS et/ou CSS, google "merge css" ou "js combine"


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed