Share
À la fin de cet article, vous devez bien comprendre les fonctionnalités du pipeline d’actifs dans Rails avec lesquelles les débutants ont généralement du mal à passer. Vous aurez également une bonne connaissance de base de la compilation, des empreintes digitales, de la mise en cache, de la minification et de la compression. Le pipeline vous permet de parcourir beaucoup de kilomètres et de comprendre pourquoi il est aussi important que de connaître ses caractéristiques..
Le pipeline d’actifs dans Rails est géré par le pignons-rails gemme. Par défaut, il est activé lorsque vous créez une nouvelle application Rails. Sprockets est une bibliothèque Ruby qui vous aide à gérer vos ressources JavaScript et CSS..
En plus de cela, il s'occupe de la compilation ainsi que du prétraitement des langages de plus haut niveau tels que Sass, SCSS et CoffeeScript. Le prétraitement signifie simplement que vos styles, HTML ou JavaScript sont générés après avoir écrit du code dans une autre langue. Par exemple, vos feuilles de style Sass sont précompilées en CSS valide. Puisque les navigateurs ne peuvent pas comprendre des choses comme CoffeeScript, nous devons d'abord le prétraiter.
Trois joyaux jouent un rôle essentiel dans tout cela:
Accentsconagua
bar à caféuglifiersass-railssass-rails vous permet d'écrire votre choix de style Sass pour créer votre CSS, bar à café vous donne une syntaxe plus agréable pour écrire votre JavaScript, et uglifier à son tour, comprime ces atouts. Au fait, sass-rails est en charge de la compression des fichiers CSS elle-même. Les trois gemmes seront ajoutées à votre Gemfile automatiquement lorsque vous créez une nouvelle application Rails. Si vous avez une raison de ne pas utiliser Sprockets avec Rails, vous pouvez l'ignorer à partir de la ligne de commande lorsque vous lancez votre application:
rails nouvelle appname --skip-sprockets
Cette commande empêche l’ajout des gemmes mentionnées ci-dessus à votre Gemfile et vous donne une version différente du config / application.rb fichier. Maintenant, vous devez configurer votre propre solution pour gérer vos actifs.
Lorsque vous prétraitez quelque chose comme CoffeeScript dans un fichier JS valide ou Sass dans un fichier CSS, vous avez également la possibilité de traiter davantage ces fichiers. Minfication et compression sont les deux grands. La minification supprime les éléments que le navigateur ne tient pas compte des espaces blancs et les commentaires sont de bons candidats, par exemple. Sass peut également traiter directement de la minification. Ou vous utilisez simplement le paramètre par défaut Rails du compresseur YUI pour traiter les feuilles de style. En passant, Rails vous permet même d’écrire et de configurer votre propre compresseur personnalisé..
Je devrais mentionner que Sass a une version compressée des styles de sortie. C’est vraiment déroutant car cela minimise vos feuilles de style. La compression est un processus différent et réduit considérablement la taille de votre fichier. La compression, ou gzipping, cible des bits répétitifs du code et les remplace par des pointeurs occupant moins d'espace. Ainsi, plus vos fichiers de ressources sont répétitifs, plus ils sont compressés et de taille réduite..
La minification est assez agréable, mais vous verrez les plus grandes réductions de fichiers lorsque vous utilisez gzipping. Il n'est pas rare de voir les fichiers se réduire à 14% de leur taille d'origine si vous les réduisez et les compressez. Lorsque vous envisagez de télécharger des tonnes d'actifs sur des réseaux plus lents, vous pouvez en tirer un avantage considérable..
Pour la production, vos actifs doivent d'abord être compilés. Fichiers que vous placez dans app / actifs doivent généralement être prétraités avant de pouvoir être servis. de quoi parle-t-on ici? Disons que vous avez travaillé sur une nouvelle application qui fonctionne sur votre serveur local. Vos fichiers Sass et votre code JavaScript CoffeeScript aromatisé fonctionnent comme par magie. Cool, mais que se passe-t-il si vous voulez transférer ceci sur un serveur de production? Un tel serveur, chargé de fournir ce contenu à un public probablement beaucoup plus large, a quelques exigences différentes de celles de votre serveur local..
Par défaut, Rails recherchera les fichiers nommés application et essayez de les précompiler pour vous. Dans cette étape, les ressources sont compilées à partir de langages de haut niveau tels que Sass dans CSS, et elles sont concaténées ensemble - à partir de plusieurs fichiers en moins de lots de fichiers. Avoir le moins de fichiers possible est bénéfique pour la performance et la rapidité. Il est également extrêmement important de réduire leur taille au strict minimum, en particulier pour les grandes applications. De plus, les fichiers sont également mis en cache. Cela signifie que vous ne chargez de nouveaux actifs que lorsqu'ils ont été modifiés de votre côté..
Vous avez le choix entre deux possibilités pour compiler vos actifs. Vous compilez sur votre serveur de production ou localement. La compilation locale signifie que vous exécutez d'abord ce processus sur votre propre machine, puis que vous le mettez en production. Cela présente les avantages que vous n'avez pas besoin d'accéder en écriture au système de fichiers sur un serveur de production, et si vous déployez sur plusieurs serveurs, vous ne pouvez effectuer ce processus qu'une seule fois. Ne pas avoir besoin de précompiler vos actifs sur le serveur si les modifications déployées n'incluent pas les modifications d'actif est un autre avantage de la précompilation locale.
La précompilation des ressources est l’une des choses que nous devons faire avant de leur envoyer nos fichiers CSS «purs» compilés, HTML et JS. Les serveurs ne devraient probablement pas avoir besoin de savoir comment gérer les langages de haut niveau tels que Sass, Slim, etc. Ils ont déjà assez de responsabilités. Pour que cela fonctionne, vous êtes responsable de la disponibilité et de la compression des pierres précieuses sur votre machine. Vous pouvez placer ces ressources compilées dans votre dépôt Git ou dans l’outil de contrôle de version de votre choix et déployer uniquement ces ressources finales en production..
Rails vous propose une tâche de rake qui prend en charge la précompilation des ressources. Une telle tâche est simplement une série d'étapes prédéfinies qui sont exécutées afin d'atteindre un objectif spécifique. L'utilisation de l'outil de compilation Rake pour de telles choses est très courante en Ruby Land. Vous pouvez facilement écrire vos propres tâches dans Rake yourself. Rails rend cela très facile. Hors de la boîte, Rails est livré avec le lib / tâches répertoire où vous pouvez facilement garer vos tâches Rake. Aucune autre configuration nécessaire. Alors quand tu cours:
Actifs rake: précompiler ou regrouper des actifs rake: précompiler
Sprockets prendra les actifs qu’il peut trouver dans son chemin de recherche et les pré-traite ou les compile dans public / biens. La sortie ressemblera à ceci:
your_rails_app / public / assets / application 454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js your_rails_app / public / assets / application 454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js.gz your_rails_app / public / assets / application e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css your_rails_app / public / assets / application e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css.gz
Lorsque vous souhaitez compiler localement, il est recommandé de modifier l'emplacement où Rails génère vos ressources. Si vous ne le faites pas, vous devrez recompiler des actifs pour le développement car vous ne verriez pas de changements locaux sans cela. L'URL modifiée sera utilisée par Sprockets pour servir vos ressources en mode développement..
config.assets.prefix = "/ dev-assets"
Pour la production, les fichiers compilés seront toujours placés dans un /les atouts répertoire par défaut.
Vous allez vous retrouver avec des actifs uniques, aka fichiers manifestes comme application.js et application.css. De cette façon, vous n'avez pas besoin de lier manuellement tous vos actifs à votre balisage et évitez de charger plusieurs fichiers d'actif au lieu d'un pour chaque catégorie..
Le numéro long qui est attaché s'appelle l'empreinte digitale. Il est utilisé pour comparer des fichiers et voir si leur contenu a peut-être changé avant de devoir être mis en cache à nouveau. Ce que vous pouvez également voir, c'est que vous obtenez deux versions du même fichier. Celui avec le .gz extension de fichier est la version gzippée des ressources. gzip est utilisé pour la compression et la décompression de fichiers et pour éliminer un peu de la graisse que nous ne voulons pas envoyer par le fil. Une autre amélioration pour augmenter la vitesse, essentiellement.
Si vous estimez qu'il est nécessaire de précompiler vos ressources sur un serveur de production, la commande suivante ci-dessous créera les ressources directement sur vos serveurs. Cependant, je n’ajoute cela que par souci d’exhaustivité. Je ne suis pas sûr que vous ayez vraiment besoin de ça en tant que débutant.
RAILS_ENV = actifs de corbeille / de production: précompiler
Ces fichiers manifestes comme application.css inclure la logique pour importer tous les fichiers dans son chemin de recherche. Rails importe d'abord ces partiels, puis les compile dans un seul fichier faisant autorité que le navigateur utilisera. C'est juste un défaut, cependant, et vous pouvez changer cela bien sûr.
Chaque fichier manifeste a des directives, instructions qui déterminent quels fichiers doivent être requis pour créer ces fichiers manifeste. L'ordre dans lequel ils sont importés est également déterminé ici.
Le résultat final contient tout le contenu de tous les fichiers auxquels les directives ont accès. Sprockets charge ces fichiers, effectue le prétraitement nécessaire et arrondit le tout en compressant le résultat. Joliment utile!
Pour votre fichier manifeste CSS, app / assets / stylesheets / application.css, cela ressemble à ce qui suit:
/ *… * = Require_self * = require_tree. * /
L'équivalent JavaScript, app / assets / javascripts / application.js, se ressemble:
//… // = require jquery // = require jquery_ujs // = require_tree .
Comme vous pouvez le constater à partir de cet exemple, il est indispensable d’avoir besoin de jQuery si vous comptez sur votre code JavaScript..
Par défaut, Rails crée une empreinte digitale pour chaque nom de fichier lors du processus de précompilation. Plus spécifiquement, Sprockets crée un hachage MD5 à partir du contenu de vos fichiers. La chaîne hexadécimale résultante de 32 caractères, à savoir un résumé, est ensuite attachée aux noms de fichiers de vos actifs..
Cela signifie que si le contenu de vos fichiers change, vos noms de fichier, la partie de hachage MD5, changeront également. Pourquoi s'appelle-t-il une empreinte digitale? De telles hachages ont une très forte probabilité d'être uniques et peuvent donc être utilisés pour identifier le caractère unique d'un fichier, tout comme les empreintes digitales..
navbar-908e25f4bf641868d8683022a5b62f54.css
Nous ne parlons pas d'une chaîne hexadécimale aléatoire. Le contenu des fichiers est poussé par une fonction mathématique qui le convertit en une séquence unique de 32 caractères. Cela signifie que vous obtenez le même résultat haché lorsque vous appliquez la fonction au même contenu deux fois ou aussi souvent que vous le souhaitez.
Grâce à ce mécanisme intelligent, il est possible de vérifier les modifications et de ne mettre à jour que les fichiers qui donneraient un hachage MD5 différent. Aux fins de la mise en cache, c'est de l'or. Si rien n'a changé, il est mis en cache par le navigateur Web pour les demandes futures. Dans ce contexte, le contournement du cache signifie simplement que les clients distants demanderont une nouvelle copie d'un fichier car l'empreinte digitale a été modifiée. Bien sûr, une nouvelle empreinte digitale sera créée et ajoutée au nom de fichier de votre actif..
MD5 ("Le renard brun rapide saute par-dessus le chien paresseux")9e107d9d372bb6826bd81d3542a419d6
Vous pouvez désactiver les empreintes digitales pour la production et le développement:
config.assets.digest = false
config.assets.digest = false
N'oublions pas pourquoi il est bon d'avoir le pipeline d'actifs. Il vise à faciliter la gestion de vos actifs. L'écriture des styles et des comportements pour les applications est devenue de plus en plus nuancée et complexe. Il est également devenu plus agréable de travailler avec certains outils. Préparer les actifs pour la production et les utiliser devrait être au moins un peu plus trivial et vous faire gagner du temps..
Disposer d'un peu d'automatisation et de conventions pour organiser les ressources est vraiment agréable, car cela simplifie votre travail. Le portefeuille d'actifs adoucit même la transaction et arrondit le tout avec quelques liens d'actifs sucrés. Cela en fait un plaisir de gérer les actifs de votre code. Examinons quelques-uns des suspects habituels qui, espérons-le, augmenteront encore votre niveau de bonheur:
javascript_include_tagstylesheet_link_tagimage_tagDepuis son extraction, Sprockets n'a pas changé la façon dont vous pouvez lier vos actifs. cela fonctionne toujours comme avant. Les exemples ci-dessus sont des méthodes de commodité qui prennent le nom de vos actifs comme arguments. Ils déterminent ensuite les noms d’extension des fichiers corrélés eux-mêmes. Ces méthodes d'assistance créent non seulement les balises nécessaires pour le code HTML approprié, mais également la liaison avec les fichiers d'actif. Bien sûr, ils ne sont pas obligatoires, mais ils sont quand même agréables à lire et très lisibles. Il y a un peu moins d'encombrement dans votre balisage si vous les utilisez.
<%= stylesheet_link_tag "some-stylesheet", media: "all" %> <%= javascript_include_tag "some-js-file" %> <%= image_tag "some-image.png" %>
Dans votre fichier de mise en page globale, Rails vous en fournit trois prêtes à l'emploi..
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => vrai%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => vrai%> <%= csrf_meta_tags %>
Cela se traduit par la sortie suivante dans le code HTML rendu:
Regardons de plus près comment gérer les actifs d'image.
Images placées dans le public / assets / images Il est possible d’accéder au répertoire via cette méthode pratique, sans avoir à chercher vous-même les noms de chemins. C’est un bon exemple de «convention sur la configuration» au travail.
<%= image_tag "some-image.png" %>
Cela se traduirait par:
Si activé, Sprockets servira ces fichiers si trouvé. Quand un fichier comme une-image.png est empreintes digitales, comme une-image-9e107d9d372bb6826bd81d3542a419d6.png, il sera traité de la même manière.
Si vous avez besoin d'autres répertoires dans public / assets / images ou à l'intérieur app / assets / images pour organiser vos images, peut-être quelque chose de plus pour les icônes ou svg fichiers, Rails n'aura aucun problème à les trouver. Vous devez simplement ajouter le nom du répertoire en premier:
<%= image_tag "icons/some-icon.png" %> <%= image_tag "svgs/some.svg" %>
Voir, pas de science de fusée, et les autres aides d'actifs sont traitées de la même manière.
Asset Pipeline est configuré pour évaluer le code ERB dès le départ. Tout ce que vous avez à faire est d’ajouter le .erb extension à un fichier et vous êtes bon pour aller-Sprockets prendra soin du reste. Lorsque vous générez des contrôleurs, il crée également des vues qui ont déjà la .erb extension. La même chose vaut pour les échafaudages.
Mais cela fonctionne aussi pour les feuilles de style. Vous pouvez les améliorer en utilisant ERB en eux. Vous créez simplement quelque chose comme exemple.css.erb des dossiers. Je ne suis pas sûr que ce soit une technique largement utilisée, cependant. Cela peut être très pratique, mais je serais probablement prudent de ne pas en abuser car vous pouvez aller très loin. Ces fichiers CSS dynamiques ne devraient probablement pas contenir trop de logique. Cela ressemble à une odeur de code, mais les dégâts semblent être contenus si vous faites principalement appel à des assistants ERB..
.une classe background-image: url (<%= asset_path 'some-image.png' %>)
Cette image sera trouvée si vous l'avez dans l'un des chemins de chargement du pipeline d'actifs, généralement sous app / assets / images. La chose intéressante est, si ce fichier a déjà été traité et empreinte, alors Sprockets utilisera le chemin public / biens et le trouver là-bas. La même chose vaut pour d'autres types d'actifs, bien sûr. N'oubliez pas d'utiliser <%= %>, <% %> interpoler le code Ruby là-bas. Cela ne fonctionnera pas sans eux. Lors de la précompilation, Sprockets interpolera le code utilisé dans les fichiers CSS ou Sass et en produira un .css fichiers à nouveau - avec ou sans empreinte digitale selon vos paramètres, bien sûr.
Vous trouverez ci-dessous quelques options supplémentaires pouvant être utiles pour créer des liens vers diverses catégories d’actifs:
asset_pathasset_urlchemin_imageURL de l'imageaudio_pathaudio_urlfont_pathfont_urlvideo_pathURL de la vidéoLa différence entre ces frères et sœurs est que le _url la version vous donne le chemin complet, comme http://example.com/assets/application.css, tandis que le _chemin version se traduit par le chemin relatif vers un actif, comme /assets/application.css.
Quand vous utilisez le sass-rails petit bijou, vous pouvez également utiliser le chemin et url des aides pour vos atouts. Ils sont une évidence-vraiment. C'est aussi simple que ça:
.une classe image d'arrière-plan: asset-path ("une-image.png"); .some-class background-image: asset-url ("some-image.png"); .some-class image-fond: image-chemin ("une-image.png"); .some-class background-image: image-url ("une-image.png"); Notez que ces assistants utilisent un trait d'union (-) et non un trait de soulignement (_).
image-path ("une-image.png") Se traduit par "/assets/some-image.png". image-url ("une-image.png") va se développer dans url (/assets/some-image.png)-qui à son tour traduit à l'URL complète, comme "http://www.example.com/assets/some-image.png ". C'est la même chose pour Asset-Path, bien sûr.
Fait intéressant, ce joyau offre également sa propre saveur d’autres aides à la création d’actifs de Rails. Cela signifie que vous ne devez pas utiliser .erb fichiers et faire <%= %> interpolations dans vos feuilles de style. Vous utilisez simplement ces aides de ressources de sass-rails, qui se sent un peu plus élégant à mon avis. Aussi, moins odorant.
Asset-Pathasset-urlchemin de l'imageURL de l'imagechemin audioaudio-urlchemin de policefont-urlchemin vidéoURL de la vidéoCes méthodes d'assistance savent exactement où trouver vos ressources. Si vous les mettez dans le répertoire conventionnel, le chemin de recherche est essentiellement. La différence entre chemin et url est-ce que vous avez des chemins relatifs et un chemin absolu. Rappel rapide: un chemin relatif est le chemin d’une destination de fichier donnée à partir d’un autre emplacement de fichier. Les chemins absolus vous donnent l’emplacement en référence au répertoire racine.
Le pipeline d’actifs a été extrait depuis Rails 4 et n’est plus une fonctionnalité essentielle. Il est activé par défaut, mais Sprockets en est maintenant responsable. Vous êtes libre de le sauter lorsque vous lancez un projet.
L'utilisation du pipeline facilite grandement la gestion et la compilation des actifs. Vous n'avez pas besoin de configurer quoi que ce soit et pouvez vous concentrer uniquement sur l'utilisation de ces ressources. La cerise sur le gâteau, c’est que vous bénéficiez également de nombreuses méthodes pratiques et pratiques..
Vos fichiers pour vos fichiers CSS, JS, CoffeeScript, Sass, Haml, Slim, etc. sont parfaitement organisés dans un emplacement central, sous app / actifs. Sprockets est responsable du service des fichiers à partir de ce répertoire. Les fichiers qu’ils contiennent nécessitent généralement un traitement préalable, comme la conversion de fichiers Sass en fichiers CSS équivalents..
À présent, vous connaissez la plupart des fonctionnalités du pipeline d’actifs, que les débutants ont généralement du mal à comprendre. Plus important que de connaître ses seules fonctionnalités, vous devez maintenant connaître le pourquoi. Vous devez avoir une bonne connaissance de la compilation, des empreintes digitales, de la mise en cache, de la minification et de la compression. J'espère que vous apprécierez tout le potentiel de ce pipeline pour rendre votre vie de développeur un peu plus simple..
