Javascript minification automatisation

J'ai un site web, qui utilise beaucoup de jquery/javascript. Maintenant, à la page d'index J'ai environ 10 fichiers javascript inclus dans la tête:Javascript minification automatisation

<head> 
<script src="/js/jquery.js"></script> 
<script src="/js/jquery_plugin_1.js"></script> 
<script src="/js/jquery_plugin_2.js"></script> 
<script src="/js/jquery_plugin_3.js"></script> 
<script src="/js/my_scripts_1.js"></script> 
<script src="/js/my_scripts_2.js"></script> 
<script src="/js/my_scripts_3.js"></script> 
<script src="/js/my_scripts_4.js"></script> 
<!-- ...and so on --> 
</head>

Depuis nombre de visiteurs grossit, je commence à penser à la performance de tout cela. J'ai lu, c'est une bonne idée, de réduire tous les fichiers javascript et de les rassembler en un seul, donc un navigateur doit faire une seule requête HTTP. Je l'ai fait. Maintenant, j'ai everything.js fichier contenant tous les javascript, y compris jquery, plugins et mes scripts personnalisés.

<head> 
<!-- 
<script src="/js/jquery.js"></script> 
<script src="/js/jquery_plugin_1.js"></script> 
<script src="/js/jquery_plugin_2.js"></script> 
<script src="/js/jquery_plugin_3.js"></script> 
<script src="/js/my_scripts_1.js"></script> 
<script src="/js/my_scripts_2.js"></script> 
<script src="/js/my_scripts_3.js"></script> 
<script src="/js/my_scripts_4.js"></script> 
... 
--> 
<script src="/js/everything.js"></script> 
</head>

Le plaisir commence lorsque j'ai besoin d'apporter des modifications à l'un des fichiers. Chaque fois, pour vérifier si mes modifications fonctionnent comme prévu, j'ai besoin de compresser le fichier et de mettre à jour everything.js ou de décommenter tout l'ancien code. Avec ce genre de travail, il est trop facile d'oublier quelque chose et de faire une erreur.

Question: Y a-t-il une solution automatisée qui peut soulager ce mal de tête? Quelque chose, qui me permettrait d'éditer mes fichiers séparés comme je le faisais, et réduirait et rassemblerait tout quand je serais prêt à tester mes changements?

J'utilise PHP5 et SVN

SOLUTION

Merci pour votre aide, tout le monde, j'ai trouvé ma solution: Je vais mettre un crochet post-commit dans mon repo SVN qui prendra tous mes fichiers .js, les assembler et les réduire en utilisant le compresseur YUI. Ensuite, dans mon script, je vais inclure fork javascript, de sorte que dans l'environnement de développement, le site inclura des fichiers javascript séparés, mais en production, le fichier combiné et minifié sera inclus.

Source

2010-12-08 Silver Light

Vous pouvez écrire un script shell qui fait cela pour vous, en collectant tous les fichiers '.js' dans un répertoire donné, en peignant puis en compressant le résultat. – Gumbo

Je pense que vous devriez vérifier si vos scripts fonctionnent correctement lorsqu'ils sont dans un fichier. –

Nous avons un script de déploiement personnalisé qui prend soin d'elle. En bref, il minimise tous les fichiers CSS et JavaScript en utilisant YUI Compressor et les empaquette dans deux fichiers, un général et un autre avec une logique spécifique pour une page donnée. Une fois cela fait, nous créons un lien symbolique (ou un nouveau dossier, selon le projet) vers le dossier contenant les fichiers compressés et les nouveaux changements sont propagés instantanément. Cette approche est utilisée dans tous les environnements sauf le développement.

Avant minification, c'est ce que la structure CSS ressemble (il est plus ou moins la même chose pour JavaScript, il est juste pour vous donner une idée):

css/Layout/Core/reset.css 
css/Layout/Core/index.css 
css/Layout/Tools/notice.css 
css/Layout/Tools/form.css 
css/Layout/Tools/overlay.css 
css/Skin/Default/Core/index.css 
css/Skin/Default/Tools/notice.css 
css/Skin/Default/Tools/form.css 
css/Skin/Default/Tools/overlay.css 
css/Layout/Tools/gallery.css 
css/Layout/Tools/comments.css 
css/Layout/Tools/pagination.css 
css/Layout/Index/index.css 
css/Skin/Default/Tools/gallery.css 
css/Skin/Default/Tools/comments.css 
css/Skin/Default/Tools/pagination.css 
css/Skin/Default/Tools/achievements.css 
css/Skin/Default/Tools/labels_main.css 
css/Skin/Default/Index/index.css

Après:

minified/1290589645/css/common.css 
minified/1290589645/css/0135f148a7f6188573d2957418119a9a.css

Nous comme cette approche car elle n'implique aucun code supplémentaire à traiter à la volée. C'est juste une question de déploiement qui se produit une fois toutes les deux semaines à la production. Notre environnement de mise à jour est mis à jour tous les jours, parfois même plus d'une fois par jour, et nous n'avons encore eu aucun problème.

Source

2010-12-08 10:27:03

yuicompressor gère-t-il bien les valeurs de type url() (par exemple 'background-image: url (../ foo.jpg)')? Parce que l'URL est relative au fichier CSS, ceux-ci doivent être mis à jour lorsque le fichier est compressé sinon la référence relative sera incorrecte. –

Pas sûr d'être honnête. Nous n'avons aucun problème car nous avons une logique supplémentaire en place avec laquelle il n'est pas vraiment important que YUI Compressor le gère correctement ou non. –

-1

créer un fichier php comme celui-ci et l'enregistrer comme merger_js.php dans votre js dir

<?php 
ob_start ("ob_gzhandler"); 
$f=$_GET['f']; 
if(@file_exists($f)){ 
    $inhoud = file_get_contents($f); 
    header("Content-type: application/javascript; charset: UTF-8"); 
    header("Cache-Control: must-revalidate"); 
    $offset = 60 * 60 ; 
    $ExpStr = "Expires: " . 
    gmdate("D, d M Y H:i:s", 
    time() + $offset) . " GMT"; 
    header($ExpStr); 
}else{ 
// file not found, we return empty 
$inhoud= ""; 
} 
print $inhoud;

appeler votre java comme celui-ci

<script type='text/javascript' src='js/merger_js.php?f=blackcan.js'></script>

maintenant votre fichier javascript est envoyé compressé au navigateur . Assurez-vous de serveur peut gérer gzip (ceci est normalement installé par défaut)

Hope this helps

Source

2010-12-08 10:12:47 Grumpy

Où est la fusion? – Gumbo

enregistrer le fichier php comme merge.php – Grumpy

Mais il ne fusionne rien. – Gumbo

Je pense que vous devriez vérifier si vos scripts fonctionnent ok quand ils sont dans un fichier, puis compresser ce fichier. Nous n'avons pas beaucoup de fichiers, donc nous utilisons un minifacteur js pour chaque fichier en utilisant yui compressor. Si vous utilisez un déploiement automatisé, vous devez effectuer une minification, puis un déploiement, sinon un script de traitement par lots devrait fonctionner.

Source

2010-12-08 10:15:58

Honnêtement, je ne avez pas fait avant, mais je suis tombé sur ces deux solutions et ont pensé qu'ils pourraient vous être utiles:

jMerge

Automatic merging and versioning of CSS/JS files with PHP

Bonne chance!

Source

2010-12-08 10:38:13 Trufa