web-dev-qa-db-fra.com

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

Je suis au courant de pignons pour la combinaison de fichiers javascript, mais je ne l'ai pas essayé. Quelles sont les autres options et comment s'empilent-elles?

optimizationjavascriptcss
14
Cebjyre

J'ai écrit un gestionnaire pour Asp.Net qui utilise YUI pour compresser, concaténer et mettre en cache la sortie.

Voici la source: http://Gist.github.com/13091

4
travis

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

Avec le recul, j'aurais dû le demander sur des Webmasters plutôt que sur le site des programmeurs.

Vous avez 3 options:

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

Option 1 (utilisant une extension CakePHP):

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

Si vous utilisez un autre cadre, il y a des chances qu'il existe un outil qui accomplira cela pour vous. C'est une exigence commune dans le monde webdev.

Option 2 (en utilisant un mod Apache):

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

Veillez toutefois à surveiller les ressources de votre serveur de production. Certaines personnes ont été confrontées à des problèmes entraînant une augmentation de la charge de leur serveur. Je ne suis pas optimiste, mais cela peut nécessiter une stratégie de contenu statique suffisante pour constituer une option efficace.

Option 3:

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

Personnellement, je déconseillerais fortement cette option.

Autant que je sache, Sprockets concatène les fichiers JS de la même manière que AssetPacker, il vient juste d'être implémenté en tant que Ruby Gem. Ce qu'il ne fait pas, c'est minify 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, vérifiez ceci .

Je sais que j'ai mis 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.

2
Evan Plaice

Si votre application Web est dans PHP, vous devriez envisager d'utiliser minify :

Il combine plusieurs fichiers CSS ou Javascript, supprime les espaces inutiles et les commentaires, et les alimente avec le codage gzip et des en-têtes de cache optimaux côté client.

1
Tom

Une rapide recherche google trouve ceci pour combiner des fichiers CSS: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

1
Macha

Ê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 tirer parti de la mise en cache du navigateur (en supposant que d'autres sites utilisent le même CDN) et de la diffusion distribuée. Microsoft et Google ont chacun une solution (je n'ai pas utilisé honnêtement non plus, mais je vais certainement commencer) et il peut y en avoir d'autres.

1
Larry Smithmier

Pour les projets ASP.NET, j'en ai fait une partie de mon processus de construction basé sur instructions de Karl Seguin .

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

1
Raleigh Buckner

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 finie) 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, un nouveau fichier sera généré.

Python est également idéal pour d’autres tâches de maintenance et je lis que de nombreux administrateurs système aiment l’utiliser.

1
Pickels

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

Minifpy utilise un fichier de configuration JSON très simple pour définir quels fichiers doivent être fusionnés, minifiés 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 dans la CLI.

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

0
Samuel Dauzon