Comprendre le pipeline d'actifs Rails

Ruby on Rails est un framework de développement Web complet écrit en Ruby. Pour un développeur qui vient de commencer à travailler avec Ruby on Rails, beaucoup de choses sembleront magiques, comme les variables d'instance définies dans le contrôleur accessible par les vues. Une autre chose de ce genre est le pipeline d'actifs, mais cela crée parfois le chaos, en particulier lors du déplacement des éléments vers la production. Une simple recherche sur Google donnerait une solution à ce moment-là, mais elle ne semblerait pas complète. Cet article vous permettra de mieux comprendre le pipeline d'actifs Rails afin que vous ne vous sentiez pas coincé avec lui la prochaine fois.

Pipeline d'actifs ferroviaires

Le code écrit dans les dossiers app/assets et vendor/assets constitue la majeure partie du front-end de toute application Ruby on Rails. Tout Javascript ou CSS que nous écrivons dans ce dossier est compilé et minifié avant d'être servi aux navigateurs en production. Tout cela est pris en charge automatiquement par le pipeline d'actifs qui est livré avec Rails par défaut. Ce pipeline d'actifs est mis en œuvre par la gemme pignons-rails. Il nous permet même également d'écrire des actifs dans un langage ou des préprocesseurs différents, et de les compiler en CSS et Javascript compréhensibles pour le navigateur.

Une application Ruby on Rails au moment de sa création est fournie avec deux fichiers manifestes application.js et application.css. Ces deux fichiers contiennent par défaut quelques lignes de code significatives qui sont jugées obligatoires. Examinons le contenu de ces fichiers et essayons de comprendre à quoi ils servent.

Fichiers manifestes

/*
* Il s'agit d'un fichier manifeste qui sera compilé dans application.css, qui inclura tous les fichiers
* énumérés ci-dessous.
*
* Tout fichier CSS et SCSS dans ce répertoire, lib/assets/stylesheets, vendor/assets/stylesheets,
* ou fournisseur/assets/feuilles de style de plugins, le cas échéant, peuvent être référencés ici en utilisant un chemin relatif.
*
* Vous êtes libre d'ajouter des styles à l'échelle de l'application à ce fichier et ils apparaîtront en haut de la
* fichier compilé, mais il est généralement préférable de créer un nouveau fichier par portée de style.
*= require_self
*= arbre_requiert .
*/

Il s'agit du fichier manifeste CSS par défaut, qui inclut tous les fichiers mentionnés dans un seul fichier application.css. Le mot clé require ici fonctionne de la même manière que le mot clé require en ruby. Il rend un fichier accessible dans le fichier à partir duquel il est appelé. Le mot-clé require recherche d'abord les fichiers mentionnés dans le dossier app/assets/ , s'il n'y est pas trouvé, il recherchera dans le dossier vendor/assets/ .

'require_self' et 'require_tree .'

'require_self' charge tout le contenu de ce fichier d'où il est appelé, dans notre cas l'application.css dans la ligne où il est mentionné. 'require_tree .' charge tout le contenu dans le même dossier où il est référencé dans la ligne où il est mentionné. Si nous devons inclure tous les fichiers d'un sous-dossier, utilisez 'require_tree ./folder_name/'. Ceci est utile lorsque vous utilisez du CSS simple. Mais si nous voulons utiliser SASS/SCSS, utiliser des variables globales pour les couleurs, etc., nous devons importer le fichier CSS en utilisant la méthode SCSS `@import` plutôt que `require`.

Chemins d'accès aux actifs

Il n'y a pas de grande différence entre le dossier app/assets et le dossier vendor/assets. Par convention, il est conseillé d'utiliser le dossier app/assets pour les fichiers CSS et Javascript personnalisés que nous créons et le dossier user vendor/assets pour CSS et Javascript de tout plug-in tiers.

L'ordre dans lequel les actifs sont recherchés est le suivant :

/app/ressources/images

/app/actifs/javascripts

/app/assets/feuilles de style

/fournisseur/actifs/images

/actifs/javascripts

/assets/feuille de style

/[actifs inclus par gemmes]

Précompilation des actifs

Pour compiler tous les fichiers et les réduire, nous devons exécuter rake assets:precompile. Cette commande lance une tâche de rake qui trouve les fichiers mentionnés dans application.css, s'ils sont écrits en SCSS/SASS, ils sont compilés en CSS, puis ajoutés en tant que partie du fichier application.css. Ce fichier application.css est lié à chaque page à l'aide d'une balise de lien de feuille de style, une aide à la vue des rails. La même chose se produit pour application.js.

Par défaut, seuls application.css et application.js sont les fichiers manifestes et sont donc précompilés. Mais nous pourrions vouloir utiliser un ou plusieurs fichiers comme fichiers manifestes pour différentes mises en page. Dans ce cas, ces fichiers doivent être ajoutés au tableau de précompilation dans config/initializers/asset.rb

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

Ici, avec les fichiers application.css et application.js, les fichiers dashboard.css et dashboard.js sont considérés comme manifestes. Ainsi, lors de la précompilation, ces fichiers sont également précompilés. Après la précompilation, ces fichiers nouvellement générés sont placés dans le dossier public/assets.

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

tableau de bord-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

tableau de bord-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

dossier public/actifs

Il s'agit du troisième dossier dans lequel nous pouvons trouver des actifs dans une application rails, mais l'ajout direct d'actifs ici n'est pas encouragé, sauf s'il s'agit d'un actif statique et qu'il ne change pas du tout. De plus, nous ne pourrons pas référencer les fichiers placés dans ce dossier à l'aide des assistants d'url de rails. Les actifs sont généralement précompilés uniquement dans l'environnement de production. Si vous souhaitez précompiler les actifs en local, lancez le rake assets :precompile RAILS_ENV=production in local.

tableau de bord-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

tableau de bord-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Si vous jetez un coup d'œil aux noms de fichiers ci-dessus, ils sont associés à 64 caractères aléatoires. Ce processus s'appelle la prise d'empreintes digitales, ce qui fait que le nom de fichier entier dépend du contenu du fichier. Cette technique est vraiment utile pour mettre en cache les actifs. Si le contenu du fichier reste le même, le nom des fichiers restera également le même, il peut donc être mis en cache. Si le contenu change, le nom change et le cache aussi.

Aides d'url d'actifs Sass

Chaque fois que nous mettons des polices, des images dans le dossier app/assets, puis essayons d'y accéder à partir de fichiers CSS, SCSS, cela fonctionnera bien en développement. Mais la plupart du temps, il casse la production en disant ressource introuvable /assets/bg-image.jpg. Cela se produit en particulier pour les packages de polices que nous incluons. C'est parce que nous aurions donné quelque chose comme ça pour l'image de fond

image de fond : url('/images/header_background.jpg');

En production, il essaiera d'obtenir l'image à partir de /images/header_background.jpg. Mais il n'y aura pas de fichiers présents dans le dossier public nommé 'header_background.jpg' à moins que nous ne placions le fichier dans le répertoire public. Nous les plaçons normalement dans app/assets ou vendor/assets. Ainsi, lors de la précompilation, il sera compilé et l'empreinte digitale sera ajoutée à tous les actifs sans js/CSS. Par conséquent, tous les fichiers image, les fichiers de police porteront des empreintes digitales dans leur nom et cela ne fonctionnera pas.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b1800af76a4b4

Les fichiers sont compilés et ajoutés comme indiqué ci-dessus dans le dossier public. Donc, pour référencer cela dans le CSS, nous devons utiliser les assistants de chemin d'accès aux actifs fournis par les rails. Au lieu de 'url('/images/header_backgroung.png')', utilisez 'image-url('header_background.png')'. Après la précompilation, ceci sera ajouté vu comme

image d'arrière-plan : url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

J'espère que cet article vous a aidé à comprendre le pipeline d'actifs Rails. Une meilleure compréhension du pipeline d'actifs vous aidera à garder le code lié au front-end plus organisé et maintenable. Si vous souhaitez en savoir plus sur le pipeline d'actifs, voici le lien du guide officiel.

Restez à l'écoute de notre prochain article pour savoir si vous avez les bonnes données pour l'analyse des sentiments

Vous envisagez d'acquérir des données sur le Web ? Nous sommes là pour vous aider. Faites-nous part de vos besoins.