Que dois-je utiliser pour combiner automatiquement les fichiers css / js?

14

Je connais des pignons pour combiner des fichiers javascript, mais je ne l'ai pas essayé. Quelles sont les autres options et comment se cumulent-elles?

optimization javascript css Cebjyre
la source
2
De plus, bien que ce ne soit pas une vraie réponse, vous pourriez être intéressé par les packages de ressources: limi.net/articles/resource-packages Malheureusement, je ne pense pas que quiconque l'ait encore implémenté.
luiscubal

Réponses:

2

J'ai déjà abordé cette question dans une autre question

Avec le recul, j'aurais dû le demander sur les Webmasters au lieu du site Programmeurs.

Vous avez 3 options:

  1. Laissez votre framework le gérer automatiquement
  2. Laissez votre serveur Web le gérer automatiquement
  3. Lancez votre propre option pour le faire manuellement

Option 1 (en utilisant une extension CakePHP):

Téléchargez et installez AssetPacker sur votre site (qui nécessite également jsmin et CSSTidy). Modifiez vos quelques lignes de source qui incluent les fichiers js. Laver-> Rincer-> Répéter. Voila, le reste se fait automatiquement pour vous.

Si vous utilisez un autre framework, il y a de fortes chances qu'il existe un outil qui accomplira cela pour vous. C'est une exigence assez courante dans le monde webdev.

Option 2 (en utilisant un mod Apache):

Jetez un œil au mod Google Pagespeed pour Apache . Il fait tout ce que vous décrivez et bien plus encore.

Assurez-vous cependant de surveiller les ressources de votre serveur de production. Certaines personnes ont vu des problèmes où cela augmente la charge sur leur serveur de manière négative. Je ne suis pas positif, mais cela peut nécessiter une stratégie de contenu statique suffisante pour être une option efficace.

Option 3:

Si vous le voulez vraiment, vous pouvez créer de la magie PHP qui concatène le côté serveur de fichiers JS et combine toutes les rel de liens en un seul mais ... C'est exactement ce que les deux stratégies font déjà de toute façon.

Personnellement, je déconseille fortement cette option.

Pour autant que je sache, Sprockets concatène les fichiers JS de la même manière que AssetPacker, il est simplement implémenté comme Ruby Gem. Ce qu'il ne fait pas, c'est minimiser le code js. Donc, si vous l'utilisez, c'est probablement une bonne idée de saisir le joyau jsmin aussi. Pour plus d'informations sur l'utilisation de Sprockets + JSMin dans CakePHP, consultez ceci .

Je sais que je mets l'accent sur CakePHP mais ... Je suppose que, si un plugin peut être adapté à CakePHP, il devrait être trivial de l'adapter également à un cadre différent.

Evan Plaice
la source
1

Êtes-vous sûr de vouloir les combiner? Si vous utilisez une bibliothèque commune, vous pouvez utiliser un CDN pour livrer vos javascripts. Vous pouvez ensuite profiter de la mise en cache du navigateur (en supposant que d'autres sites utilisent le même CDN) et de la distribution distribuée. Microsoft et Google ont chacun des solutions (que je n'ai pas utilisées honnêtement non plus, mais je vais certainement commencer) et il peut y en avoir d'autres.

Larry Smithmier
la source
1

Pour les projets ASP.NET, je l'ai intégré à mon processus de génération sur la base des instructions de Karl Seguin .

Karl le décrit le mieux sur son blog, mais la version courte consiste à configurer une application console enveloppant YUICompressor. Ensuite, vous pouvez configurer une tâche de post-génération pour appeler cette application console par rapport à l'emplacement des fichiers JS dans votre site.

Raleigh Buckner
la source
1

Si votre webapp est en PHP, vous devriez envisager d'utiliser minify :

Il combine plusieurs fichiers CSS ou Javascript, supprime les espaces et les commentaires inutiles et les sert avec l'encodage gzip et les en-têtes de cache côté client optimaux.

À M
la source
1

Pour cela, connaître Python pourrait être utile. Vous pouvez apprendre Python assez rapidement. J'ai commencé il y a environ 2 semaines et ma première application (qui n'est toujours pas terminée) va faire exactement la même chose que vous voulez. Comme le compilateur DotLess, il aura une fonction de surveillance qui examinera les fichiers ou les répertoires et s'ils changent, il générera un nouveau fichier.

Python est également idéal pour d'autres tâches de maintenance et j'ai lu que de nombreux administrateurs système aiment l'utiliser.

Pickels
la source
Je suis moi-même plus un gars de Perl, et je pourrais probablement pirater quelque chose ensemble, mais je préfère utiliser un outil préexistant (avec, probablement, de meilleurs tests et plus de fonctionnalités que mes efforts rapides et sales n'auraient).
Cebjyre
Auto-promotion hideuse mais @Pickels, seriez-vous intéressé à aider ce projet? code.google.com/p/lesscss-python
Metalshark
0

J'ai créé Minifpy : un outil écrit en Python3 (compatible Mac OS, Windows et Linux) pour fusionner et minimiser les fichiers JS et CSS en utilisant Python.

Minifpy utilise un fichier de configuration JSON très simple pour définir quels fichiers doivent être fusionnés, réduits ou non: 

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

Vous pouvez également utiliser cet outil en CLI.

Minifpy détecte toutes les modifications sur les fichiers JS / CSS et les fusionne / minimise automatiquement (utile pour le développement).

Samuel Dauzon
la source