Neu: udemy Kurs Ruby für Anfänger von Stefan Wintermeyer

12.1. Einleitung

Die Asset Pipeline wird seit Rails 3.1 per Default eingerichtet und benutzt. Sie bietet dem Rails-Entwickler die Möglichkeit, CSS, JavaScript und Grafikdateien optimaler – sprich komprimierter und damit schneller – an den Browser auszuliefern. So werden verschiedene CSS-Dateien zu einer großen Datei zusammengefasst und mit einem Fingerabdruck im Dateinamen an den Browser ausgeliefert. Dieser Fingerabdruck ermöglicht es dem Browser und einem evt. dazwischenliegendem Proxy, die Dateien optimal zu cachen und führt damit zu schnelleren Ladezeiten im Browser.
Sie können innerhalb der Asset Pipeline ausführlich und übersichtlich CSS, SASS, JavaScript und CoffeeScript programmieren, um später daraus automatisch komprimierte CSS- und JavaScript-Dateien ausliefern zu lassen.
Als Beispiel nehmen wir wieder unseren Webshop mit einem Product Scaffold:
Stefan-Wintermeyers-MacBook-Air:~ xyz$ rails new webshop
[...]
Stefan-Wintermeyers-MacBook-Air:~ xyz$ cd webshop 
Stefan-Wintermeyers-MacBook-Air:webshop xyz$ rails generate scaffold product name 'price:decimal{7,2}'
[...]
Stefan-Wintermeyers-MacBook-Air:webshop xyz$ rake db:migrate
[...]
Stefan-Wintermeyers-MacBook-Air:webshop xyz$
Im Verzeichnis app/assets finden Sie dann folgende Dateien:
app/assets
|-- images
|   `-- rails.png
|-- javascripts
|   |-- application.js
|   `-- products.js.coffee
`-- stylesheets
    |-- application.css
    |-- products.css.scss
    `-- scaffolds.css.scss
Die Dateien app/assets/javascripts/application.js und app/assets/stylesheets/application.css sind sogenannte Manifest Dateien. Sie includen automatisch die anderen Dateien im jeweiligen Verzeichnis.

Manifest Dateien

In app/assets/javascripts und app/assets/stylesheets gibt es immer sogenannte Manifest Dateien, die Anweisungen an die Asset Pipeline enthalten. Sie definieren, was alles eingebunden werden soll.

application.js

Die Datei app/assets/javascripts/application.js hat folgenden Inhalt:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
In der application.js werden automatisch die im jquery-rails Gem definierten jQuery-Dateien eingebunden (weitere Informationen zu jQuery finden Sie unter http://jquery.com/). Zusätzlich werden mit require_tree . alle anderen Dateien in diesem Verzeichnis eingebunden.
Das noch nicht optimierte Ergebnis können Sie sich in der Entwicklungsumgebung unter der URL http://0.0.0.0:3000/assets/application.js anschauen.

application.css

Die Datei app/assets/stylesheets/application.css hat folgenden Inhalt:
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */
Es werden mit dem Befehl require_tree . automatisch alle Dateien in diesem Verzeichnis eingebunden.

rake assets:precompile

Bei der Benutzung der Asset Pipeline ist zu beachten, dass Sie vor dem Starten des Rails-Servers in der Production Umgebung die Assets pre-compilen müssen. Dies geschieht mit dem Befehl rake assets:precompile:
Stefan-Wintermeyers-MacBook-Air:webshop xyz$ rake assets:precompile
/Users/xyz/.rvm/rubies/ruby-1.9.3-p194/bin/ruby /Users/xyz/.rvm/gems/ruby-1.9.3-p194@global/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
Stefan-Wintermeyers-MacBook-Air:webshop xyz$

Anmerkung

Wenn Sie das vergessen, werden Sie im Log folgende Fehlermeldung finden:
ActionView::Template::Error (application.css isn't precompiled)
Die von rake assets:precompile erstellten Dateien finden Sie dann im public/assets-Verzeichnis:
public/assets
|-- application-0149f820dbdd285aa65e241569d8c256.css
|-- application-0149f820dbdd285aa65e241569d8c256.css.gz
|-- application-f8ca698e63b86d217c88772a65d2d20e.js
|-- application-f8ca698e63b86d217c88772a65d2d20e.js.gz
|-- application.css
|-- application.css.gz
|-- application.js
|-- application.js.gz
|-- manifest.yml
|-- rails-be8732dac73d845ac5b142c8fb5f9fb0.png
`-- rails.png
Werfen Sie einmal mit Ihrem Lieblingseditor einen Blick in die erstellten css- und js-Dateien. Sie werden optimierten Code finden. Falls der Webserver dies unterstützt, werden direkt die gezippten gz-Dateien ausgeliefert, was noch einmal zur Schnelligkeit beiträgt.

Anmerkung

Der Unterschied in der Dateigröße ist enorm. Die in der Entwicklungsumgebung erzeugte application.js-Datei ist 100 KB groß. Die von rake assets:precompile erstellte js.gz-Datei nur noch 36 KB. Gerade Benutzer von Mobiltelefonen werden es Ihnen danken.
Der Gewindigkeitsvorteil liegt übrigens nicht nur in der reinen Dateigröße, sondern auch darin, dass nur eine Datei und nicht mehrere Dateien downgeloadet wird. Der HTTP-Overhead beim Laden eine Datei ist zeitintensiv.

Der Fingerabdruck

Der Fingerabdruck im Dateinamen setzt sich aus einer Hash-Summe zusammen. Diese wird aus dem Inhalt der jeweiligen Datei generiert. Nur durch diesen Fingerabdruck können wir sicher sein, dass optimal gecachet wird und dass bei einer Veränderung im Inhalt nicht ein alter Cache benutzt wird. Eine simple, aber sehr effektive Methode.

Autor

Stefan Wintermeyer