Share
Am Ende dieses Artikels sollten Sie sich mit den Funktionen der Asset-Pipeline in Rails gut auskennen, mit denen Anfänger normalerweise eine schwierige Zeit verbringen. Sie haben auch ein gutes Einführungswissen über Kompilierung, Fingerprinting, Caching, Minification und Komprimierung. Die Pipeline bietet eine Menge Kilometer und ein gutes Verständnis der Gründe ist ebenso wichtig wie das Wissen um die Funktionen.
Die Asset-Pipeline in Rails wird vom verwaltet Kettenräder Juwel. Sie ist standardmäßig aktiviert, wenn Sie eine neue Rails-Anwendung erstellen. Sprockets ist eine Ruby-Bibliothek und hilft Ihnen bei der Verwaltung Ihrer JavaScript- und CSS-Assets.
Darüber hinaus kümmert es sich um das Kompilieren und die Vorverarbeitung von höheren Sprachen wie Sass, SCSS und CoffeeScript. Vorverarbeitung bedeutet einfach, dass Ihre Stile, HTML oder JavaScript generiert werden, nachdem Sie Code in einer anderen Sprache geschrieben haben. Beispielsweise werden Ihre Sass-Stylesheets in gültiges CSS vorkompiliert. Da Browser Dinge wie CoffeeScript nicht verstehen können, müssen wir sie zuerst vorverarbeiten.
Drei Juwelen spielen dabei eine entscheidende Rolle:
Accentsconagua
Kaffee-SchienenUglifierSass-SchienenSass-Schienen können Sie Ihre Sass-Variante Ihrer Wahl für die Erstellung Ihres CSS schreiben, Kaffee-Schienen gibt Ihnen eine schönere Syntax für das Schreiben von JavaScript und Uglifier wiederum komprimiert diese Assets. Apropos, Sass-Schienen ist für die Komprimierung der CSS-Dateien selbst verantwortlich. Alle drei Edelsteine werden automatisch zu Ihrer Gemfile hinzugefügt, wenn Sie eine neue Rails-App erstellen. Wenn Sie einen Grund haben, Kettenräder nicht mit Schienen zu verwenden, können Sie diese beim Starten Ihrer App von der Befehlszeile aus überspringen:
Schienen neuer Appname --skip-Kettenräder
Dieser Befehl verhindert, dass die oben genannten Edelsteine zu Ihrer Gemfile hinzugefügt werden, und gibt Ihnen eine andere Version der config / application.rb Datei. Jetzt müssen Sie eine eigene Lösung für den Umgang mit Ihren Assets einrichten.
Wenn Sie etwas wie CoffeeScript in gültiges JS oder Sass in CSS vorverarbeiten, haben Sie auch die Möglichkeit, diese Dateien noch etwas zu verarbeiten. Minfizierung und Kompression sind die zwei großen. Minification beseitigt Dinge, die der Browser nicht interessiert - weiße Leerzeichen und Kommentare sind zum Beispiel gute Kandidaten. Sass kann sich auch direkt mit der Minifizierung befassen. Oder Sie verwenden einfach den Rails-Standard des YUI-Kompressors, wenn Sie mit Stylesheets arbeiten. Nebenbei können Sie mit Rails sogar Ihren eigenen benutzerdefinierten Kompressor schreiben und konfigurieren.
Ich sollte erwähnen, dass Sass eine komprimierte Version von Ausgabestilen hat. Dies ist tatsächlich verwirrend, da es Ihre Stylesheets minimiert. Die Komprimierung ist ein anderer Prozess und verringert die Dateigröße erheblich. Kompression oder Gzipping zielt auf sich wiederholende Bits des Codes und ersetzt sie durch Zeiger, die weniger Platz benötigen. Je wiederholter Ihre Asset-Dateien sind, desto mehr werden sie komprimiert und verkleinert.
Die Reduzierung ist zwar ganz nett, aber wenn Sie gzipping verwenden, werden Sie die größte Reduzierung der Dateigröße feststellen. Es ist nicht selten, dass Dateien auf 14% ihrer ursprünglichen Größe verkleinert werden, wenn Sie sie sowohl verkleinern als auch komprimieren. Wenn Sie über das Herunterladen Tonnen von Assets über langsamere Netzwerke nachdenken, kann dies von enormem Nutzen sein.
Für die Produktion müssen Ihre Assets zuerst zusammengestellt werden. Dateien, die Sie ablegen App / Vermögenswerte müssen normalerweise vorverarbeitet werden, bevor sie bedient werden können. Worüber reden wir hier? Nehmen wir an, Sie haben an einer neuen App gearbeitet, die auf Ihrem lokalen Server funktioniert. Ihre Sass-Dateien und Ihr CoffeeScript-gewürztes JavaScript funktionieren auf magische Weise. Cool, aber was passiert, wenn Sie dies auf einen Produktionsserver übertragen möchten? Ein solcher Server, der für die Bereitstellung dieses Inhalts an eine möglicherweise viel größere Zielgruppe verantwortlich ist, hat einige andere Anforderungen als Ihr lokaler Server.
Standardmäßig sucht Rails nach benannten Dateien Anwendung und versuchen Sie, sie vorab zu kompilieren. In diesem Schritt werden Assets aus Hochsprachen wie Sass zu CSS kompiliert und sie werden miteinander verkettet - aus mehreren Dateien in weniger Dateipaketen. Wenn Sie so wenige Dateien wie möglich haben, ist dies für Leistung und Geschwindigkeit von Vorteil. Auch das Komprimieren ihrer Größe auf das Nötigste ist von großer Bedeutung - insbesondere für größere Anwendungen. Darüber hinaus werden Dateien auch zwischengespeichert. Das bedeutet, dass Sie neue Assets nur dann laden, wenn sie an Ihrem Ende geändert wurden.
Sie haben zwei Möglichkeiten, wo Sie Ihre Assets zusammenstellen möchten. Sie kompilieren auf Ihrem Produktionsserver oder lokal. Lokale Kompilierung bedeutet, dass Sie diesen Prozess zuerst auf Ihrer eigenen Maschine ausführen und dann in die Produktion verschieben. Dies hat den Vorteil, dass Sie keinen Schreibzugriff auf das Dateisystem auf einem Produktionsserver benötigen. Wenn Sie die Bereitstellung auf mehreren Servern durchführen, können Sie diesen Vorgang nur einmal durchführen. Wenn Sie die Assets auf dem Server nicht vorkompilieren müssen, wenn die bereitgestellten Änderungen keine Asset-Änderungen enthalten, ist dies ein weiterer Vorteil der lokalen Vorkompilierung.
Das Vorkompilieren von Assets ist eines der Dinge, die wir tun müssen, bevor wir ihnen unser „reines“, kompiliertes CSS, HTML und JS senden. Server sollten wahrscheinlich nicht wissen müssen, wie sie mit Hochsprachen wie Sass, Slim und so weiter umgehen. Sie haben schon genug Aufgaben. Damit dies funktioniert, sind Sie dafür verantwortlich, dass die Komprimierung und die Minimierung von Edelsteinen auf Ihrem Computer verfügbar sind. Sie können diese kompilierten Assets in Ihr Git-Repo oder in das von Ihnen bevorzugte Versionskontrolle-Tool einfügen und nur diese endgültigen Assets für die Produktion bereitstellen.
Rails bietet Ihnen eine Rake-Aufgabe, die sich jedoch um das Vorkompilieren von Assets kümmert. Eine solche Aufgabe besteht einfach aus einer Reihe von vordefinierten Schritten, die ausgeführt werden, um ein bestimmtes Ziel zu erreichen. Die Verwendung des Rake-Build-Tools für solche Dinge ist in Ruby Land sehr üblich. Sie können Ihre eigenen Aufgaben einfach selbst in Rake schreiben. Rails macht das sehr einfach. Aus der Box kommt Rails mit lib / Aufgaben Verzeichnis, in dem Sie Ihre Rake-Aufgaben bequem parken können. Es sind keine weiteren Einstellungen erforderlich. Also wenn du rennst:
Rake-Assets: Exec-Rake-Assets vorkompilieren oder bündeln: Precompile
Kettenräder nehmen die Assets, die sie in ihrem Suchpfad finden können, auf und bereiten sie vor oder kompilieren sie öffentlich / Vermögenswerte. Die Ausgabe sieht ungefähr so aus:
your_rails_app / public / assets / anwendungs 454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js your_rails_app / public / assets / anwendungs 454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js.gz your_rails_app / public / assets / anwendungs e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css your_rails_app / public / assets / application-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css.gz
Wenn Sie lokal kompilieren möchten, wird empfohlen, den Ort zu ändern, an dem Rails Ihre Assets ausgibt. Wenn Sie dies nicht tun, müssen Sie die Assets für die Entwicklung neu kompilieren, da Sie ohne sie keine lokalen Änderungen sehen würden. Die geänderte URL wird von Sprockets verwendet, um Ihre Assets im Entwicklungsmodus bereitzustellen.
config.assets.prefix = "/ dev-assets"
Für die Produktion werden die kompilierten Dateien immer noch in einem Ordner gespeichert /Vermögenswerte Verzeichnis standardmäßig.
Sie erhalten am Ende einzelne Assets, also auch Manifestdateien application.js und application.css. Auf diese Weise müssen Sie in Ihrem Markup nicht manuell alle Assets manuell verknüpfen und müssen nicht mehrere Asset-Dateien anstelle von einer für jede Kategorie laden.
Die angezeigte lange Nummer wird als Fingerabdruck bezeichnet. Es wird verwendet, um Dateien zu vergleichen und festzustellen, ob sich deren Inhalt geändert hat, bevor sie erneut zwischengespeichert werden müssen. Was Sie auch sehen können, ist, dass Sie zwei Versionen derselben Datei erhalten. Der mit dem .gz Dateierweiterung ist die komprimierte Version der Assets. gzip wird zur Komprimierung und Dekomprimierung von Dateien und zum Abschneiden von Fett verwendet, das wir nicht über das Kabel senden möchten. Eine weitere Verbesserung, um die Geschwindigkeit zu erhöhen.
Falls Sie Ihre Assets auf einem Produktionsserver vorkompilieren möchten, werden die Assets mit dem folgenden Befehl direkt auf Ihren Servern erstellt. Ich füge dies jedoch nur der Vollständigkeit halber hinzu. Ich bin mir nicht sicher, ob Sie dies als Anfänger dringend brauchen werden.
RAILS_ENV = Produktionsbehälter / Schienen-Assets: Vorkompilierung
Diese Manifestdateien mögen application.css Fügen Sie die Logik hinzu, um alle Dateien in den Suchpfad zu importieren. Rails importiert diese Partials zuerst und kompiliert sie dann in einer einzigen autorisierenden Datei, die der Browser verwendet. Dies ist jedoch nur eine Vorgabe, und Sie können das natürlich ändern.
Jede Manifestdatei hat Direktiven. Dies sind Anweisungen, die bestimmen, welche Dateien zum Erstellen dieser Manifestdateien benötigt werden. Dort wird auch die Reihenfolge festgelegt, in der sie importiert werden.
Das Endergebnis enthält den gesamten Inhalt aller Dateien, auf die die Direktiven zugreifen können. Sprockets lädt diese Dateien, führt die erforderliche Vorverarbeitung durch und rundet das Ganze durch Komprimieren des Ergebnisses ab. Ziemlich verdammt nützlich!
Für Ihre CSS-Manifestdatei, app / assets / stylesheets / application.css, das sieht wie folgt aus:
/ *… * = Required_self * = requir_tree. * /
Das JavaScript-Äquivalent, app / assets / javascripts / application.js, sieht ähnlich aus:
//… // = erfordern jquery // = erfordern jquery_ujs // = required_tree .
Wie Sie in diesem Beispiel sehen können, müssen Sie zunächst jQuery verwenden, wenn Sie sich in Ihrem JavaScript-Code darauf verlassen.
Standardmäßig erstellt Rails während des Vorkompilierungsvorgangs einen Fingerabdruck für jeden Dateinamen. Insbesondere erstellt Sprockets einen MD5-Hash aus dem Inhalt Ihrer Dateien. Die resultierende 32-stellige Hexadezimalzeichenfolge, auch Digest genannt, wird dann an die Dateinamen Ihrer Assets angehängt.
Das heißt, wenn sich der Inhalt Ihrer Dateien ändert, ändern sich auch Ihre Dateinamen und der MD5-Hash-Teil. Warum heißt es Fingerprinting? Solche Hashes haben eine sehr hohe Wahrscheinlichkeit, eindeutig zu sein, und können daher ebenso wie Fingerabdrücke verwendet werden, um die Eindeutigkeit einer Datei zu identifizieren.
navbar-908e25f4bf641868d8683022a5b62f54.css
Es handelt sich nicht um eine zufällige hexadezimale Zeichenfolge. Der Inhalt von Dateien wird durch eine mathematische Funktion gepusht, die ihn in eine eindeutige Folge von 32 Zeichen konvertiert. Das bedeutet, dass Sie das gleiche Hash-Ergebnis erhalten, wenn Sie die Funktion zweimal auf denselben Inhalt anwenden oder wie oft Sie möchten.
Durch diesen intelligenten Mechanismus ist es möglich, nach Änderungen zu suchen und nur Dateien zu aktualisieren, die zu einem anderen MD5-Hash führen würden. Für Cachezwecke ist dies golden. Wenn sich nichts geändert hat, wird es vom Webbrowser für zukünftige Anforderungen zwischengespeichert. Cache-Busting bedeutet in diesem Zusammenhang lediglich, dass Remote-Clients eine neue Kopie einer Datei anfordern, da sich der Fingerabdruck geändert hat. Natürlich wird ein neuer Fingerabdruck erstellt und zum Dateinamen Ihres Assets hinzugefügt.
MD5 ("Der schnelle braune Fuchs springt über den faulen Hund")9e107d9d372bb6826bd81d3542a419d6
Sie können das Fingerprinting sowohl für die Produktion als auch für die Entwicklung deaktivieren:
config.assets.digest = false
config.assets.digest = false
Vergessen wir nicht, warum es schön ist, die Asset-Pipeline zu haben. Es soll Ihnen den Umgang mit Vermögenswerten erleichtern. Das Schreiben der Stile und Verhaltensweisen für Apps wurde immer differenzierter und komplexer. Einige der Werkzeuge sind auch erfreulicher geworden. Das Vorbereiten von Assets für die Produktion und das Servieren sollten zumindest ein bisschen trivialer sein und Ihnen Zeit sparen.
Ein bisschen Automatisierung und Konventionen zum Organisieren von Assets ist wirklich nett, da dies Ihre eigentliche Arbeit erleichtert. Die Asset-Pipeline versüßt den Deal sogar und rundet das Ganze mit ein paar zuckerhaltigen Assets-Links ab. Das macht den Umgang mit Assets in Ihrem Code zum Kinderspiel. Schauen wir uns einige der üblichen Verdächtigen an, die hoffentlich Ihr Glücksniveau noch steigern:
javascript_include_tagstylesheet_link_tagimage_tagSeit der Extraktion haben die Kettenräder die Art und Weise, wie Sie Ihre Assets verknüpfen können, nicht geändert. es funktioniert immer noch wie zuvor. Die obigen Beispiele sind Bequemlichkeitsmethoden, bei denen der Name Ihrer Assets als Argumente verwendet wird. Sie ermitteln dann die Namen der Erweiterungen für korrelierte Dateien. Diese Hilfsmethoden erstellen nicht nur die erforderlichen Tags für den richtigen HTML-Code, sondern sorgen auch für die Verknüpfung mit den Asset-Dateien. Sie sind natürlich nicht zwingend, aber trotzdem schön und gut lesbar. Es gibt etwas weniger Unordnung in Ihrem Markup, wenn Sie diese verwenden.
<%= stylesheet_link_tag "some-stylesheet", media: "all" %> <%= javascript_include_tag "some-js-file" %> <%= image_tag "some-image.png" %>
In Ihrer globalen Layoutdatei bietet Rails Ihnen drei davon aus der Box.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true%> <%= csrf_meta_tags %>
Dies führt zu folgender Ausgabe im gerenderten HTML-Code:
Sehen wir uns den Umgang mit Bild-Assets genauer an.
Bilder in der öffentlich / vermögenswerte / bilder Über diese praktische Methode kann auf das Verzeichnis zugegriffen werden. Sie müssen sich nicht selbst mit Pfadnamen beschäftigen. Dies ist ein gutes Beispiel für „Konvention über Konfiguration“ bei der Arbeit.
<%= image_tag "some-image.png" %>
Das würde folgendes ergeben:
Wenn aktiviert, werden diese Dateien von Sprockets bereitgestellt, wenn sie gefunden werden. Wenn eine Datei gefällt some-image.png ist Fingerabdruck, wie some-image-9e107d9d372bb6826bd81d3542a419d6.png, es wird genauso behandelt.
Wenn Sie andere Verzeichnisse benötigen öffentlich / vermögenswerte / bilder oder innerhalb App / Assets / Bilder um Ihre Bilder zu organisieren, vielleicht etwas mehr für Icons oder svg Dateien, Rails wird kein Problem haben, sie zu finden. Sie müssen lediglich den Namen des Verzeichnisses hinzufügen:
<%= image_tag "icons/some-icon.png" %> <%= image_tag "svgs/some.svg" %>
Keine Raketenwissenschaft, und die anderen Helfer werden auf dieselbe Weise behandelt.
Die Asset-Pipeline ist so eingerichtet, dass sie den ERB-Code von Anfang an auswertet. Alles was Sie tun müssen, ist das .erb Erweiterung für eine Datei und Sie sind gut zu gehen-Sprockets kümmert sich um den Rest. Wenn Sie Controller generieren, werden auch Ansichten erstellt, die bereits die .erb Erweiterung. Gleiches gilt für Gerüste.
Dies funktioniert aber auch für Stylesheets. Sie können sie verbessern, indem Sie ERB verwenden. Sie erstellen einfach so etwas example.css.erb Dateien. Ich bin mir jedoch nicht sicher, ob es sich um eine weit verbreitete Technik handelt. Es kann sehr praktisch sein, aber ich würde wahrscheinlich vorsichtig sein, wenn man es überlastet, da man es sehr weit bringen kann. Diese dynamischen CSS-Dateien sollten wahrscheinlich nicht zu viel Logik enthalten. Es fühlt sich an wie ein Codegeruch, aber der Schaden scheint begrenzt zu sein, wenn Sie sich meist auf ERB-Helfer verlassen.
.Some-Class Hintergrundbild: URL (<%= asset_path 'some-image.png' %>)
Dieses Bild wird gefunden, wenn Sie es in einem der Ladepfade der Asset-Pipeline haben - normalerweise irgendwo unter App / Assets / Bilder. Die coole Sache ist, wenn diese Datei bereits verarbeitet und mit einem Fingerabdruck versehen wurde, verwenden Sprockets den Pfad öffentlich / Vermögenswerte und finde es dort. Gleiches gilt natürlich auch für andere Arten von Vermögenswerten. Vergiss nicht zu benutzen <%= %>, <% %> um den Ruby-Code dort zu interpolieren. Ohne sie geht es nicht. Während der Vorkompilierung interpoliert Sprockets den in den CSS- oder Sass-Dateien verwendeten Code und gibt die Ebene aus .css Dateien erneut - mit oder ohne Fingerabdruck entsprechend Ihren Einstellungen.
Nachfolgend finden Sie einige weitere Optionen, die für das Verknüpfen mit verschiedenen Asset-Kategorien hilfreich sein könnten:
asset_pathasset_urlBildpfadBild URLaudio_pathaudio_urlfont_pathfont_urlvideo_pathVideo-URLDer Unterschied zwischen diesen Geschwistern ist der _url Version gibt Ihnen den vollständigen Pfad, wie http://example.com/assets/application.css, während _Pfad version übersetzt in den relativen Pfad zu einem Asset, z /assets/application.css.
Wenn Sie das verwenden Sass-Schienen Edelstein, können Sie auch Gebrauch machen Pfad und url Helfer für Ihr Vermögen. Sie sind wirklich ein Kinderspiel. So einfach ist das:
.some-class Hintergrundbild: Asset-Pfad ("some-image.png"); .some-class Hintergrundbild: Asset-URL ("Some-Image.png"); .some-class Hintergrundbild: Bildpfad ("some-image.png"); .some-class background-image: image-url ("some-image.png"); Beachten Sie, dass diese Helfer einen Bindestrich (-) und keinen Unterstrich (_) verwenden..
Bildpfad ("some-image.png") wird übersetzt in "/assets/some-image.png". Image-URL ("some-image.png") wird sich ausdehnen URL (/assets/some-image.png)-was wiederum auf die vollständige URL übersetzt, wie "http://www.example.com/assets/some-image.png ". Das gleiche gilt für Asset-Pfad, Na sicher.
Interessanterweise bietet dieser Edelstein auch andere Helfer von Rails. Das bedeutet, dass Sie nicht verwenden müssen .erb Dateien und tun <%= %> Interpolationen in Ihren Stylesheets. Sie nutzen einfach diese Asset-Helfer aus Sass-Schienen, das fühlt sich meiner Meinung nach etwas eleganter an. Auch weniger Code-Smelly.
Asset-PfadAsset-URLBildpfadBild URLAudio-PfadAudio-URLfont-pfadfont-urlVideopfadVideo-URLDiese Hilfsmethoden wissen genau, wo Sie Ihre Assets finden können - wenn Sie sie in das herkömmliche Verzeichnis einfügen, wird der Suchpfad grundsätzlich angezeigt. Der Unterschied zwischen Pfad und url ist, dass Sie relative Pfade und einen absoluten Pfad haben. Eine kurze Erinnerung: Ein relativer Pfad ist der Pfad zu einem bestimmten Dateiziel von einem anderen Dateispeicherort. Absolute Pfade geben den Speicherort in Bezug auf das Stammverzeichnis an.
Die Asset-Pipeline wurde seit Rails 4 extrahiert und ist keine Kernfunktion mehr. Sie ist standardmäßig aktiviert, aber jetzt wird sie von Sprockets übernommen. Sie können es überspringen, wenn Sie ein Projekt initiieren.
Die Verwendung der Pipeline macht Asset Management und Compilation zu einem Kinderspiel. Sie müssen nichts einrichten und können sich auf die Arbeit mit diesen Assets konzentrieren. Die Kirsche an der Spitze ist, dass Sie auch viele praktische Convenience-Methoden erhalten.
Ihre Dateien für CSS, JS, CoffeeScript, Sass, Haml, Slim usw. befinden sich übersichtlich an einem zentralen Ort unter App / Vermögenswerte. Sprockets übernimmt die Bereitstellung von Dateien aus diesem Verzeichnis. Die darin enthaltenen Dateien müssen normalerweise vorverarbeitet werden, z. B. indem Sie Sass-Dateien in ihre entsprechenden CSS-Dateien umwandeln.
Mittlerweile kennen Sie die meisten Asset-Pipeline-Funktionen, für die Anfänger normalerweise eine knifflige Zeit haben, die Köpfe zu wickeln. Wichtiger als das Wissen um die Funktionalität allein, kennen Sie jetzt auch das Warum. Sie sollten sich mit der Kompilierung, dem Fingerprinting, dem Caching, der Minifizierung und der Komprimierung vertraut machen. Ich hoffe, Sie werden wissen, wie viel diese Pipeline für Sie tut, um das Leben Ihrer Entwickler ein bisschen stressfreier zu gestalten.
