Combiner et minifier plusieurs fichiers CSS / JS

Vérifiez minify – il vous permet de combiner plusieurs fichiers js, css en un simplement en les empilant dans une url, par exemple

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

Nous l'avons utilisé pendant des années et ça fait un excellent travail et le fait à la volée (pas besoin d'éditer des fichiers).

Je pense que le compresseur YUI est le meilleur qu'il y a. Il minifie JS et CSS et console.log même les instructions console.log les utilisateurs utilisent pour le débogage JavaScript à bas niveau.

Vérifiez combien il est facile .

Vous pouvez le démarrer dans une tâche de fourmi et donc l'inclure dans vos crochets de publication / pré-gestion si vous utilisez svn / git.

MISE À JOUR: Aujourd'hui, j'utilise le grunt avec les contributions concat, minify & uglify. Vous pouvez l'utiliser avec un observateur pour créer de nouveaux fichiers minifés en arrière-plan chaque fois que vous modifiez votre source. L'uglify contrib non seulement les logs de console de strips, mais aussi les fonctionnalités et propriétés non utilisées.

Consultez ce didacticiel pour un bref aperçu.

MISE À JOUR: De nos jours, les gens retournent de grunt und son prédécesseur "gulp" et utilisent npm comme un outil de construction. Lisez ceci ici .

Je devrais mettre à jour toutes les pages qui ont besoin de ces 3 fichiers pour faire référence au CSS nouvellement minifié.

Tout d'abord, je dirais que vous devriez avoir un en-tête commun. Il faudra donc ne pas changer tous les en-têtes en tout temps, le cas échéant. C'est une bonne pratique d'avoir un seul en-tête ou 2-3. Donc, comme votre page a besoin, vous pouvez modifier votre en-tête. Donc, chaque fois que vous souhaitez étendre votre application Web, il sera moins risqué et fastidieux.

Vous n'avez pas mentionné vos environnements de développement. Vous pouvez voir qu'il existe de nombreux outils de compression répertoriés pour différents environnements . Et vous utilisez un bon outil, c'est-à-dire le compresseur YUI.

J'ai fini par utiliser CodeKit pour concatener mes fichiers CSS et JS. La fonctionnalité que je trouve vraiment utile est la possibilité de concrétiser une sauvegarde de fichiers; Car il surveille les actifs CSS / JS respectifs. Une fois que je les ai bien regroupés, par exemple sur 1 fichier CSS et 1 JS, tous les autres fichiers peuvent simplement se référer à ces 2.

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

Avertissement: Je ne suis affilié d'aucune façon avec CodeKit. Je l'ai trouvé au hasard sur le Web et il m'a servi d'outil formidable dans mon processus de développement. Il est également livré avec de bonnes mises à jour depuis que je l'ai utilisé pour la première fois il y a plus d'un an.

C'est l'année 2015 dans la rue et la façon la plus simple dont l'utilisateur utilise gulp – http://gulpjs.com/ . Minify code using gulp-uglify pour js scripts et gulp-minify-css pour css est très simple. Gulp vaut certainement essayer

Astuce rapide pour les utilisateurs de Windows, si vous souhaitez uniquement concatter des fichiers:

Ouvrez un cmd à l'endroit désiré, et faites simplement passer vos fichiers dans un fichier en utilisant " type "

ex:

 type .\scripts\*.js >> .\combined.js 

Si l'ordre de vos scripts est important, vous devez spécifier les fichiers dans l'ordre désiré .

J'utilise ceci dans un fichier bat pour mes projets angulaires / bootstrap

 del combos.js type .\lib\jquery.min.js >> .\combos.js type .\lib\bootstrap.min.js >> .\combos.js type .\lib\Angular\angular.min.js >> .\combos.js type .\lib\Angular\angular-route.min.js >> .\combos.js type .\lib\Angular\angular-sanitize.min.js >> .\combos.js type .\app.js >> .\combos.js type .\services\*.js >> .\combos.js type .\controllers\*.js >> .\combos.js 

Je ne vois pas que vous avez mentionné un système de gestion de contenu (WordPress, Joomla, Drupal, etc.) mais si vous utilisez un CMS populaire, ils ont tous des plugins / modules disponibles (options gratuites aussi) qui minient et mettent en cache vos css et js.

L'utilisation d'un plugin vous permet de garder les versions non compressées disponibles pour l'édition, puis, lorsque des modifications sont apportées, le plugin inclut automatiquement vos modifications et comprime le fichier. Assurez-vous simplement de choisir un plugin qui vous permettra d'exclure des fichiers (comme un fichier js personnalisé), en cas de rupture de quelque chose.

J'ai essayé dans le passé de conserver ces fichiers manuellement et cela se transforme toujours en un cauchemar de maintenance. Bonne chance, j'espère que ça m'a aidé.

Pour les personnes qui veulent quelque chose d'un peu plus léger et flexible, j'ai créé js.sh aujourd'hui pour résoudre ce problème. C'est un outil de ligne de commande simple ciblé sur les fichiers JS qui pourraient facilement être modifiés pour prendre en charge également les fichiers CSS. Avantages:

• Facilement configurable pour l'utilisation par plusieurs développeurs sur un projet
• Combine les fichiers JS dans l'ordre spécifié dans script_order.txt
• Les compresse avec le compilateur de fermeture de Google
• Décompose JS dans des blocs de <25kb dans la mesure du possible car l'iPhone ne cache pas plus de 25kb
• Génère un petit fichier PHP avec les balises <script> que vous pouvez inclure, le cas échéant
• Utilisation: js.sh -u yourname

Il pourrait utiliser certaines améliorations, mais c'est mieux pour mon cas d'utilisation que toutes les autres solutions que j'ai vues jusqu'ici.

La première étape d'optimisation est la minimisation des fichiers. (Je recommande fortement GULP pour la minimisation et l'optimisation. Sa solution de montre simple, l'installation et tous les fichiers sont compressés à la fois. Supporte tous les CSS, JS, moins, Sass, etc …)

OU solution de l'école ancienne:

1) En général, en tant que processus d'optimisation, pour optimiser les performances d'un site, essayez de fusionner tous les CSS dans un seul fichier et de compresser le fichier à l'aide de Compass . De cette façon, vos demandes multiples de CSS statiques seront remplacées par une seule.

2) Problème de JS multiples que vous pouvez résoudre en utilisant CDN (ou Google Hosted Libraries) afin que les demandes passent à un autre serveur et non à vous. De cette façon, le serveur n'attend pas la demande précédente pour terminer avant l'envoi suivant.

3) Si vous avez votre propre JavaScript localement stocké minimisez chaque fichier en utilisant le plugin Brackets "Compresser JavaScript". Il s'agit essentiellement d'un clic pour compresser JavsScript. Brackets est un éditeur gratuit conçu pour CSS et JS, mais peut être utilisé pour PHP et d'autres langues. Il existe de nombreux plugins à choisir pour les développeurs de front-end et back-end. En général "un clic" pour faire toutes ces commandes (jusqu'à présent multiples). Btw, Brackets a remplacé mon Dreamweaver très cher;)

3) Essayez d'utiliser des outils tels que Sass , Compass, moins pour minimiser vos CSS.

Remarque: Même sans utiliser le mélange SASS ou les variables, votre CSS sera compressé (utilisez simplement la commande pure CSS et Compass "watch" pour le compresser pour vous).

J'espère que ça aide!

Si vous effectuez un pré-traitement sur les fichiers que vous desservez, vous souhaitez probablement configurer un système de construction approprié (par exemple un Makefile). De cette façon, vous avez des fichiers source sans duplication, et chaque fois que vous faites un changement, vous exécutez 'make' et met tous les fichiers générés automatiquement à jour. S'il existe déjà un système de construction en place, apprenez comment cela fonctionne et utilisez-le. NE MarcoAachetTélieAachachetteachachachachachistándachachistándachachééleaéleaMachinéleaéleaachachachachachachéeshaélieach

Tout d'abord, découvrez comment combiner et minimiser vos fichiers à partir de la ligne de commande (la documentation YUICompressor couvre ceci). Désignez un répertoire pour des éléments générés automatiquement, séparés des éléments sur lesquels vous travaillez, mais accessibles au serveur Web, et les sorties, par exemple gen / scripts / combined.js. Mettez les commandes que vous avez utilisées dans un Makefile et réexécutez «make» chaque fois que vous avez changé et souhaitez que cela prenne effet. Ensuite, mettez à jour les en-têtes dans d'autres fichiers pour indiquer les fichiers combinés et minifiés.

Dans mon projet symfony, je fais quelque chose comme ça

 {# layout.html.twig #} {% block styles %} {% if app.environment == 'prod' %} <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" /> {% else %} <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" /> <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" /> {% endif %} {% endblock %} 

 {# some-view.html.twig #} {% extends 'AppMainBundle::layout.html.twig' %} {% block styles %} {{ parent() }} {% if app.environment != 'prod' %} <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" /> {% else %} {% endblock %} 

Lorsque la version dev est prête à être produite, j'utilise ce script pour combiner tous les fichiers css et remplacer le contenu de min.css .

Mais cette solution ne fonctionne que si les mêmes fichiers css sont inclus dans toutes les pages.

Vous pouvez utiliser le module nœud cssmin qui est construit à partir du célèbre compresseur YUI

 $ npm -gi cosmic # install # Usage var puts = require('util').puts, fs = require('fs'), cssmin = require('./cssmin'); var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8'); var min = cssmin(css); puts(min); 

Tous les utilitaires plus rapides sont trouvés ici

 http://www.code-stuff.net http://www.code-stuff.net/HttpUtility http://www.code-stuff.net/HttpUtility/minifyCSS http://www.code-stuff.net/HttpUtility/stringify_json