Combinez et réduisez plusieurs fichiers CSS / JS

Question

Je suis en train d'optimiser les performances du site, par la consolidation et de la compression des CSS et JS fichiers. Ma question est plus sur le (béton) les étapes sur la façon d'atteindre cet objectif, compte tenu d'une situation réelle, j'ai été confronté (devrait être typique chez les autres les développeurs de trop, tout de même).

Ma page fait référence à plusieurs CSS et JS fichiers comme suit:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="http://stackoverflow.com/css/main.css" />
<link type="text/css" rel="stylesheet" href="http://stackoverflow.com/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="http://stackoverflow.com/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

Pour le lancement de la production, je tiens à combiner les 3 fichiers CSS en un seul et rapetisser à l'aide par exemple YUI Compressor. Mais alors, j'aurais besoin de mettre à jour toutes les pages qui ont des besoins de ces 3 fichiers de référence à la nouvelle-minifiés CSS. Cela semble enclin à l'erreur (par exemple, vous êtes à la suppression et l'ajout de quelques lignes dans de nombreux fichiers). Toute autre moins risqué? Le même problème pour les fichiers JS.

Answer 1

Check out minify - il vous permet de combiner plusieurs fichiers js, css en un seul en les empilant dans une URL, par exemple

 <script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>
 

Nous l'utilisons depuis des années et il fait un excellent travail et le fait à la volée (nul besoin de modifier des fichiers).

Answer 2

Je pense que le YUI Compressor est le meilleur il est. Il minifies CSS et JS et même de bandes de ceux - console.log des déclarations d'utilisation de personnes à faible niveau de débogage JavaScript.

Découvrez comment il est facile.

Vous pouvez le lancer dans une tâche ant et, par conséquent, comprennent dans votre post/pré commettre des crochets si vous utilisez svn/git.

Mise à JOUR: aujourd'Hui je utiliser grunt avec la méthode concat, rapetisser & uglify contributions. Vous pouvez l'utiliser avec un veilleur de sorte qu'il crée de nouvelles minifed fichiers en arrière-plan chaque fois que vous changez de source. Le uglify contrib non seulement des bandes de journaux de la console, il a également des bandes de fonctions inutilisées et les propriétés.

Voir ce tutoriel pour un bref aperçu.

Answer 3

J'avais besoin de mettre à jour toutes les pages qui ont des besoins de ces 3 fichiers de référence à la nouvelle-minifiés CSS.

Tout d'abord, je dirais que vous devriez avoir à en-tête commun. Donc, il n'a pas besoin de changer tous les en-têtes en tout temps, chaque fois que nécessaire. C'est une bonne pratique d'avoir un seul en-tête ou 2-3. Pour que votre page de besoin, vous pouvez changer votre tête. Donc, chaque fois que vous souhaitez étendre votre application web, il sera moins risqué et fastidieux.

Vous havn a pas mentionné de vos environnements de développement. Vous pouvez le voir, il existe de nombreux outils de compression répertoriées pour différents environnements. Et que vous utilisez le bon outil je.e.YUI Compressor.

Answer 4

J'ai fini par utiliser CodeKit pour concaténer mon les fichiers CSS et JS. La fonctionnalité que je trouve vraiment utile est la possibilité de faire la concaténation sur fichier enregistrer; car il surveille l'respectives CSS / JS actifs. Une fois que je les ai correctement combinés par exemple à 1 CSS et 1 JS fichiers, tous les autres fichiers ne peuvent tout simplement se référer à ces 2.

Vous pouvez même demander à CodeKit à faire à la volée minification / compression.

Disclaimer: je ne suis pas affilié en aucune façon avec CodeKit. J'ai trouvé au hasard sur le web et il a servi comme un excellent outil dans mon processus de développement. Il est également livré avec de bonnes mises à jour depuis que je l'ai utilisé plus d'un an.

Answer 5

Je ne vois pas vous parler d'un système de gestion de contenu (Wordpress, Joomla, Drupal, etc), mais si vous utilisez un CMS populaires, ils ont tous des plugins/modules disponibles (options gratuites) qui va rapetisser et la mémoire cache de css et js.

À l'aide d'un plugin vous donne la possibilité de garder le non compressé versions disponibles pour l'édition, puis lorsque des modifications sont apportées le plugin inclut automatiquement vos modifications et re compresse le fichier. Assurez-vous de choisir un plugin qui va vous permettre d'exclure des fichiers (comme une coutume fichier js) en cas de casse quoi que ce soit.

J'ai essayé dans le passé de garder ces fichiers manuellement et il tourne toujours dans un entretien cauchemar. Bonne chance, j'espère que ça a aidé.