Grundlegendes zur Rails-Asset-Pipeline

Ruby on Rails ist ein in Ruby geschriebenes Full-Stack-Framework für die Webentwicklung. Für einen Entwickler, der gerade erst begonnen hat, mit Ruby on Rails zu arbeiten, werden sich viele Dinge magisch anfühlen, wie z. B. Instanzvariablen, die in Controllern definiert sind, auf die über die Ansichten zugegriffen werden kann. Eine weitere solche Sache ist die Asset-Pipeline, aber sie verursacht manchmal Chaos, insbesondere wenn Dinge in die Produktion verschoben werden. Eine einfache Google-Suche würde zu diesem Zeitpunkt eine Lösung liefern, aber es würde sich nicht vollständig anfühlen. Dieser Beitrag wird Ihnen ein besseres Verständnis der Rails-Asset-Pipeline vermitteln, damit Sie beim nächsten Mal nicht das Gefühl haben, daran hängen zu bleiben.

Rails-Asset-Pipeline

Code, der in die Ordner „app/assets“ und „vendor/assets“ geschrieben wurde, macht den größten Teil des Front-Ends in jeder Ruby on Rails-Anwendung aus. Jedes Javascript oder CSS, das wir in diesen Ordner schreiben, wird kompiliert und minimiert, bevor es den Browsern in der Produktion bereitgestellt wird. All dies wird automatisch von der Asset-Pipeline erledigt, die standardmäßig mit Rails ausgeliefert wird. Diese Asset-Pipeline wird durch die Kettenräder-Schienen gem. Es erlaubt uns sogar, Assets in einer anderen Sprache oder Präprozessoren zu schreiben und sie zu CSS und Javascript zu kompilieren, die für den Browser verständlich sind.

Eine Ruby-on-Rails-Anwendung ist zum Zeitpunkt der Erstellung mit zwei Manifestdateien application.js und application.css versehen. Diese beiden Dateien enthalten standardmäßig einige Zeilen sinnvollen Codes, die als obligatorisch gelten. Lassen Sie uns einen Blick auf den Inhalt dieser Dateien werfen und versuchen herauszufinden, wozu sie dienen.

Manifest-Dateien

/*
* Dies ist eine Manifestdatei, die in application.css kompiliert wird, die alle Dateien enthält
* nachfolgend aufgeführten.
*
* Alle CSS- und SCSS-Dateien in diesem Verzeichnis, lib/assets/stylesheets, vendor/assets/stylesheets,
* oder Anbieter/Assets/Stylesheets von Plugins, falls vorhanden, können hier mit einem relativen Pfad referenziert werden.
*
* Sie können dieser Datei anwendungsweite Stile hinzufügen, die oben in der angezeigt werden
* kompilierte Datei, aber es ist im Allgemeinen besser, eine neue Datei pro Stilbereich zu erstellen.
*= require_self
*= require_tree .
*/

Dies ist die Standard-CSS-Manifestdatei, die alle genannten Dateien in einer einzigen Datei „application.css“ enthält. Das Schlüsselwort require funktioniert hier genauso wie das Schlüsselwort require in Ruby. Es macht eine Datei innerhalb der Datei zugänglich, aus der es aufgerufen wird. Das Schlüsselwort require sucht zuerst nach den erwähnten Dateien im Ordner app/assets/, wenn es dort nicht gefunden wird, sucht es im Ordner vendor/assets/.

'require_self' und 'require_tree .'

'require_self' lädt den gesamten Inhalt der Datei, aus der es aufgerufen wird, in unserem Fall die application.css, in die Zeile, in der es erwähnt wird. 'require_tree .' lädt alle Inhalte im selben Ordner, in dem darauf verwiesen wird, in die Zeile, in der es erwähnt wird. Wenn wir alle Dateien eines Unterordners einschließen müssen, verwenden Sie „require_tree ./folder_name/“. Dies ist hilfreich, wenn Sie einfaches CSS verwenden. Aber wenn wir SASS/SCSS verwenden wollen, um globale Variablen für Farben usw. zu verwenden, müssen wir die CSS-Datei mit der SCSS-Methode `@import` statt `require` importieren.

Asset-Pfade

Es gibt keinen großen Unterschied zwischen dem App/Assets- und dem Vendor/Assets-Ordner. Konventionell wird empfohlen, den App/Assets-Ordner für benutzerdefinierte CSS- und Javascript-Dateien zu verwenden, die wir erstellen, und den Vendor/Assets-Ordner für CSS und Javascript von Plugins von Drittanbietern.

Die Reihenfolge, in der Assets durchsucht werden, ist wie folgt:

/app/assets/images

/app/assets/javascripts

/app/assets/stylesheets

/vendor/assets/images

/assets/javascripts

/assets/stylesheet

/[von Edelsteinen eingeschlossene Vermögenswerte]

Asset-Vorkompilierung

Um alle Dateien zu kompilieren und zu minimieren, sollten wir rake assets:precompile ausführen. Dieser Befehl initiiert eine Rake-Aufgabe, die die in application.css erwähnten Dateien findet, wenn sie in SCSS/SASS geschrieben sind, wird sie in CSS kompiliert und dann als Teil der Datei application.css hinzugefügt. Diese application.css-Datei ist mit jeder Seite unter Verwendung des Stylesheet-Link-Tags, einem Hilfsprogramm für die Rails-Ansicht, verknüpft. Gleiches gilt für application.js.

Standardmäßig sind nur application.css und application.js die Manifestdateien und daher vorkompiliert. Aber wir möchten vielleicht eine oder mehrere Dateien als Manifestdateien für verschiedene Layouts verwenden. In diesem Fall sollten diese Dateien dem Precompile-Array unter config/initializers/asset.rb hinzugefügt werden

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

Hier werden die Dateien „dashboard.css“ und „dashboard.js“ zusammen mit den Dateien „application.css“ und „application.js“ als Manifest betrachtet. Während der Vorkompilierung werden diese Dateien also ebenfalls vorkompiliert. Nach der Vorkompilierung werden diese neu generierten Dateien im Ordner public/assets abgelegt.

Anwendung-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

Anwendung-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

Anwendung-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

Armaturenbrett-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

Dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Ordner public/assets

Dies ist der dritte Ordner, in dem wir Assets in einer Rails-Anwendung finden können, aber das direkte Hinzufügen von Assets hier wird nicht empfohlen, es sei denn, es handelt sich um ein statisches Asset, das sich überhaupt nicht ändert. Außerdem können wir mit Rails-URL-Helfern nicht auf Dateien verweisen, die in diesem Ordner abgelegt sind. Assets werden im Allgemeinen nur in der Produktionsumgebung vorkompiliert. Wenn Sie Assets lokal vorkompilieren möchten, führen Sie das Rake-Assets:precompile RAILS_ENV=production in local aus.

Armaturenbrett-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

Dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Wenn Sie sich die obigen Dateinamen ansehen, sind ihnen zufällige 64 Zeichen angehängt. Dieser Vorgang wird Fingerprinting genannt, wodurch der gesamte Dateiname vom Inhalt der Datei abhängt. Diese Technik ist wirklich hilfreich beim Zwischenspeichern der Assets. Wenn der Inhalt der Datei gleich bleibt, bleibt auch der Name der Datei gleich und kann daher zwischengespeichert werden. Wenn sich der Inhalt ändert, ändert sich der Name und damit auch der Cache.

Sass-Asset-URL-Helfer

Immer wenn wir einige Schriftarten und Bilder in den App/Assets-Ordner legen und dann versuchen, über CSS- oder SCSS-Dateien darauf zuzugreifen, funktioniert es in der Entwicklung einwandfrei. Aber meistens bricht es in der Produktion ab und sagt, dass die Ressource nicht gefunden wurde /assets/bg-image.jpg. Dies geschieht insbesondere bei den von uns mitgelieferten Schriftpaketen. Das liegt daran, dass wir so etwas für das Hintergrundbild angegeben hätten

Hintergrundbild: url('/images/header_background.jpg');

In der Produktion wird versucht, das Bild aus /images/header_background.jpg abzurufen. Es werden jedoch keine Dateien im öffentlichen Ordner mit dem Namen „header_background.jpg“ vorhanden sein, es sei denn, wir legen die Datei im öffentlichen Verzeichnis ab. Normalerweise platzieren wir sie in App/Assets oder Vendor/Assets. Während der Vorkompilierung wird es also kompiliert und ein Fingerabdruck wird allen no js/CSS-Assets hinzugefügt. Daher tragen alle Bilddateien und Schriftdateien Fingerabdrücke in ihrem Namen und dies funktioniert nicht.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b1800af6a4b4c

Dateien werden kompiliert und wie oben gezeigt im öffentlichen Ordner hinzugefügt. Um dies im CSS zu referenzieren, müssen wir von Rails bereitgestellte Asset-Pfad-Helfer verwenden. Anstelle von 'url('/images/header_backgroung.png')' verwenden Sie 'image-url('header_background.png')'. Nach der Vorkompilierung wird dies als hinzugefügt angezeigt

Hintergrundbild: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Ich hoffe, dieser Beitrag hat Ihnen geholfen, einen Überblick über die Rails-Asset-Pipeline zu erhalten. Ein besseres Verständnis der Asset-Pipeline hilft Ihnen, den Front-End-bezogenen Code besser organisiert und wartbar zu halten. Wenn Sie mehr über die Asset-Pipeline erfahren möchten, finden Sie hier den Link zum offiziellen Leitfaden.

Bleiben Sie dran für unseren nächsten Artikel, um herauszufinden, ob Sie die richtigen Daten für die Stimmungsanalyse haben

Planen Sie, Daten aus dem Internet zu erfassen? Wir sind hier um zu helfen. Teilen Sie uns Ihre Anforderungen mit.