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.scssDie 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.
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.
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.
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.
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 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.