wszystko, co powinieneś wiedzieć o Rails Asset Pipeline

co to jest Asset pipeline?

jeśli budujesz aplikację Rails, prawdopodobnie słyszałeś o potoku zasobów. Potok zasobów można traktować jako narzędzia i mechanizmy, za pomocą których pliki Javascript, arkusze stylów i obrazy są przetwarzane i przygotowywane do użycia przez przeglądarkę. Procesy te mogą minimalizować i kompresować zasoby, a także zasoby wstępne, które są napisane w innych językach, takich jak Coffeescript lub Sass.

rurociąg aktywów został stworzony w celu rozwiązania różnych problemów związanych z aktywami statycznymi. Jednym z takich problemów jest to, że każdy zasób określony oddzielnie w znacznikach HTML musi być pobierany oddzielnie, co skutkuje większą liczbą żądań HTTP i, w końcu, dłuższym czasem ładowania. Surowe pliki Javascript i CSS mogą również marnować dużą przepustowość na komentarze, dodatkowe białe spacje i długie nazwy zmiennych. Innym problemem, który pojawia się obejmuje buforowanie. Na przykład podczas serwowania pliku Javascript z serwera przeglądarka automatycznie będzie buforować ten plik przez pewien czas. Poprawia to czas ładowania strony, ale co, jeśli zasób zmieni się w późniejszym czasie? Przeglądarka nie będzie o tym wiedzieć, więc będzie nadal korzystać z buforowanego zasobu, dopóki jego żywotność pamięci podręcznej nie wygaśnie. Wreszcie, języki takie jak Coffeescript, SASS, Less i Erb ułatwiły organizowanie i pisanie Javascript i CSS, ale przeglądarka nie może ich bezpośrednio zinterpretować, więc potrzebny jest pre-procesor do konwersji tych plików na odpowiednie odpowiedniki, zanim zostaną wysłane do przeglądarki.

rurociąg aktywów, w swojej życzliwości, może rozwiązać wszystkie powyższe problemy, gdy jest prawidłowo używany. Może kompilować wiele zasobów w jeden, minimalizować i kompresować zasoby, zapewniać trawienie zasobów, aby uniknąć problemów z buforowaniem, a także wstępnie przetwarzać alternatywne Języki i przekształcać je w Javascript i CSS.

ten post obejmuje wiele tematów związanych z:

• podstawy korzystania z potoku zasobów
• najlepsze praktyki strukturyzacji, gdzie umieścić swoje zasoby
• jak używać wstępnie skompilowanej tablicy, aby określić, jakie pliki są przetwarzane przez potok zasobów
• jak można wykorzystać Sass i Coffeescript
• jak używać metod rails asset helper, i
• niektóre gotchy

podstawowe użycie

istnieją dwa podstawowe sposoby użycia potoku aktywów:

1. podczas uruchamiania serwera w trybie deweloperskim automatycznie wstępnie przetwarza i przygotowuje zasoby na bieżąco.
2. w trybie produkcyjnym prawdopodobnie użyjesz go do wstępnego przetwarzania, wersji oraz kompresji i kompilacji zasobów. Możesz to zrobić, uruchamiając następujące polecenie:

1

bundle exec rake assets:precompile

spowoduje to utworzenie (domyślnie) katalogu assets w folderze public/. Następnie dodaje wszystkie skompresowane i skompilowane pliki do tego katalogu, w odpowiednich formatach i z nowymi przetrawionymi wersjami. Następnie możesz skonfigurować Nginx lub Apache do bezpośredniego serwera tych plików, aby Rails nie musiał ich dostarczać (i uruchamiać wstępnego przetwarzania w locie itp.) siebie.

pamiętaj, że wartości domyślne można zmienić, więc jeśli coś nie działa zgodnie z oczekiwaniami, sprawdź plik konfiguracyjny aplikacji w config/application.rb. W Rails 4 Obsługa zasobów jest zazwyczaj konfigurowana w config/initializers/assets.rb.

struktura plików

ważne jest, aby uporządkować zasoby w sposób zrozumiały dla użytkownika i ułatwiający istniejącą funkcjonalność potoku zasobów. Pierwszą rzeczą, którą powinieneś wiedzieć, jest to, że wszystkie niestandardowe skrypty Javascript, arkusze stylów i obrazy powinny znajdować się w katalogu app/assets/. Domyślnie każdy z nich zawiera folder javascripts, stylesheets i images. Możesz również dodać fonts, audios i videos do katalogu app/assets/ dla tych typów zasobów. Wszystkie kody stron trzecich, których używasz (np. jQuery, backbone.js itp.) powinny być umieszczone w katalogu vendor/assets/ :

1234567891011

rails-app/ app/ assets/ images/ # Image assets javascripts/ # Custom Javascript/coffeescript stylesheets/ # Custom CSS/Sass ... vendor/ assets/ javascripts/ # Javascript libraries, etc. stylesheets/ # Vendor themes, javascript library themes, etc.

ponieważ twój serwer WWW automatycznie serwuje statyczne pliki z katalogu public/, dlaczego nie należy umieszczać tam wszystkich zasobów Javascript, obrazów i arkuszy stylów? Po pierwsze, nic w folderze public nie zostanie wstępnie przetworzone, skompresowane lub skompresowane automatycznie, więc umieszczając tam zasoby, całkowicie omijasz potok zasobów i tracisz wszystkie jego zalety. Umieszczając tam zasoby, tracisz również możliwość łatwego odwoływania się do nich w kodzie Rails. Możesz mieć na przykład widok z następującym kodem:

12345678910

# app/assets/images/logo.png= image_tag('logo')# Outputs something like <img src="/assets/logo-.png" /># public/images/logo.png= image_tag('/images/logo.png')# Outputs something like# <img src="/images/logo.png" />

w drugim scenariuszu (public/images/logo.png) witryna będzie działać tylko wtedy, gdy zostanie dostarczona z katalogu podstawowego. Nie może również korzystać z wersjonowania pliku przez potok zasobów.

Prekompilacja

możesz się teraz zastanawiać, czy wszystko, co umieścisz w folderze app/assets/javascripts/, zostanie automatycznie skompilowane dla Twojej aplikacji. Na szczęście potok zasobów umożliwia określenie, które pliki są kompilowane i w jakiej kolejności. Domyślnie aplikacja.css i aplikacji.js (lub ich odpowiedniki sass/coffeescript), wraz ze wszystkimi aktywami nie-Javascript, nie-CSS są włączone. Aby dołączyć plik CSS lub Javascript inny niż aplikacja.css i aplikacji.js, trzeba tego wymagać na jeden z dwóch sposobów:

1. config/application.rb) lub
2. Dołącz plik do manifestu zasobu lub jednego z jego pod-pliku manifestu.

pierwsza opcja wygląda tak:

12

# In config/initializers/assets.rbRails.application.config.assets.precompile += %w( some-other-file.js even-another.css )

ta opcja jest najlepsza dla plików, które ma sens umieszczać tylko na niektórych stronach, a nie powinny być umieszczane na innych. Na przykład, jeśli masz część witryny, która będzie używana jako widżet osadzony w ramce iframe, możesz chcieć tylko widget.js i widget.css lub podobne, aby były używane na tej stronie. Pliki te musiaĹ ’ yby byÄ ‡ dodane do tablicy prekompilacji, jak pokazano PowyĹźej.

druga opcja to to, co powinno być używane przez większość czasu i pozwala na kompilację plików Javascript i CSS w jednej aplikacji.js i jedna aplikacja.plik css. Manifest jest napisany na górze odpowiedniego składnika aktywów.

w coffeescript wygląda to tak:

12345

# In application.coffee##= require jquery#= require jquery_ujs#= require_tree .

powyższy manifest będzie zawierał jQuery, Adapter skryptów rails jQuery (jquery_ujs) i wszystkie pliki w bieżącym drzewie (tj. app/assets/javascript/*). Zauważ, że require_tree nie kompiluje zasobów rekurencyjnie poprzez katalogi. Jeśli masz folder plików, które chcesz dołączyć, musisz dodać go również do manifestu:

1

#= require_tree ./components

jeszcze jedną dyrektywą manifest jest require_self, która służy do włączenia Javascript bieżącego pliku w tym punkcie łańcucha. Powyższe z require_self można zapisać w pliku .js w następujący sposób:

1234567

// In application.js////= require jquery//= require jquery_ujs//= require_tree .//= require_tree ./components//= require_self

manifesty Sass / CSS używają tego samego podstawowego formatu, ale z odpowiednim stylem komentarza:

123456

/** In application.css * *= require reset *= require global *= require layout */

zauważ, że podczas używania Sass, będziesz musiał użyć reguły @import, aby wykorzystać zmienne i mixiny, ponieważ każdy plik skompilowany przez manifest ma swój własny zakres.

uważaj na używanie dyrektywy require_tree. Zasoby w drzewie będą zawarte w kolejności alfabetycznej, co oznacza, że jeśli plik zaczynający się od „A” zależy od Pliku zaczynającego się od „z”, możesz napotkać problemy, w których niezbędne elementy nie są dostępne, gdy Javascript jest oceniany przez przeglądarkę. Tego problemu można uniknąć, używając odpowiednich strażników jQuery(document).ready() lub window.onload, ręcznie określając kolejność lub poprzedzając pliki numerami takimi jak 01_, 02_:

12345

# application.js# Note that the `.js` isn't needed at the end of the filename.##= require subfolder/library#= require subfolder/depends-on-library

pamiętaj, że każdy wstępnie skompilowany plik Javascript lub CSS może zawierać manifest na górze, więc możesz użyć plików podfolderów, aby uprościć manifest najwyższego poziomu.

Sass i Coffescript oraz Rails Asset Helpers

wspomniałem nieco o Sass i Coffeescript w powyższych sekcjach, ale jeszcze nie zagłębiłem się w to, czym są. Jeśli już je znasz, przejdź do sekcji „Pomocnicy zasobów Rails”.

Sass i Coffeescript

Sass i Coffeescript to języki, które używają preprocesorów do przekształcania ich składni odpowiednio w CSS i Javascript. Istnieje kilka innych wstępnie przetworzonych języków, takich jak Typescript i Less, ale Sass i Coffeescript są domyślnie dołączone do Rails i są prawdopodobnie najbardziej popularne. Nie będę wdawać się w obszerne szczegóły dotyczące tych języków, więc proszę sprawdzić linki powyżej, aby uzyskać więcej informacji.

z mojego doświadczenia wynika, że Sass i Coffeescript dostarczają dużo cukru składniowego( ładne funkcje kodu), ale fakt, że wyjątki są wyrzucane za nieprawidłowy kod na etapie wstępnego przetwarzania, wystarcza, aby uzasadnić ich użycie. Coffeescript automatycznie zawija kod na plik i dodaje słowo kluczowe var do zmiennych lokalnych, zapobiegając w ten sposób wielu bólom głowy, które mogą się zdarzyć łatwiej w vanilla Javascript.

na przykład następujący kod Coffeescript:

12345

$ -> $('#element').on 'click', -> state = 'clicked' window.state = 'clicked' console.log 'element clicked'

jest konwertowany na następujący Javascript:

1234567891011

(function() { $(function() { return $('#element').on('click', function() { var state; state = 'clicked'; window.state = 'clicked'; return console.log('element clicked'); }); });}).call(this);

gdy preprocesor przetwarza plik, automatycznie zawija kod w funkcję anonimową ((function() {}).call(this)) i dodaje słowo kluczowe vardo pierwszego użycia state. Zauważ, że jeśli chcesz użyć globalnego zakresu, musisz określić to przez prefiks window..

Coffeescript ma o wiele więcej, ale automatyczne skalowanie było dla mnie osobiście niezwykle pomocne w zapobieganiu trudnym do znalezienia błędom.

Helpery zasobów Rails

kolejną wspaniałą funkcją, którą można uzyskać tylko za pomocą Sass w projekcie Rails, są helpery ścieżek zasobów. Podczas odwoływania się do innych zasobów w Twoim Sassie możesz użyć następującej składni, aby uzyskać odpowiednie ścieżki:

123

.logo { background-image: image-url("logo.png");}

można również użyć pomocników image-path, asset-url i asset-path. Pomocnicy -url zawijają ścieżkę za pomocą url().

Erb w zasobach

potok zasobów umożliwia ocenę kodu erb w zasobach CSS i Javascript poprzez dodanie przyrostka do nazwy pliku .erb (np. application.js.erb lub application.scss.erb). Chociaż może to być przydatne do dodawania ścieżek zasobów do Javascript, ogólnie nie polecam korzystania z tej funkcji. Dodaje kolejny krok wstępnego przetwarzania do pliku, zwiększając w ten sposób czas potrzebny na wstępną kompilację. Może również prowadzić do złych nawyków. Możesz pokusić się o dodanie kodu, który nie ma sensu w czasie kompilacji, jak tłumaczenie ciągów znaków. Te ciągi będą tłumaczone tylko w czasie kompilacji, co neguje cały cel ich tłumaczenia. Jedynym powodem użycia Erb w pliku Javascript powinno być użycie helpera asset_path, jak omówiono w przewodniku.

Asset Pipeline Gotchas

oto kilka gotchas i ciekawostek, które mogą być pomocne w rozwijaniu zasobów Twojej aplikacji Rails.

• Jak dodać dane globalne dla mojego Javascript?
  • Gon gem może być używany do wstawiania danych o zasięgu globalnym na stronę, aby twój Javascript mógł się zużyć. Jest to świetne rozwiązanie dla takich rzeczy, jak podanie identyfikatora bieżącego użytkownika lub ustawień witryny.
• gdzie należy rozszerzyć wstępnie skompilowaną tablicę?
  • w Rails 4, powinieneś powiększyć tablicę w config/initializers/assets.rb, a w Rails 3, powinieneś to zrobić w config/application.rb. Korzystanie z zasobów.rb lub aplikacji.rb ustawia wstępnie skompilowaną tablicę dla wszystkich środowisk tak, że jeśli dodasz środowisko (być może staging), nie będziesz musiał rozszerzać wstępnie skompilowanej tablicy specjalnie dla tego nowego środowiska.
    • rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • zastosowanie.rb: config.assets.precompile += %w( widget.js widget.css )
• kiedy należy wstępnie skompilować zasoby oddzielnie, rozszerzając wstępnie skompilowaną tablicę?
  • W większości przypadków jedynym powodem, dla którego chcesz to zrobić, jest to, że zasób jest umieszczony sam na specjalnej stronie, na której nie chcesz reszty zasobów, takich jak widżet osadzony w ramce iframe. Skorzystaj z aplikacji.js i aplikacji.CSS manifestuje się, aby przyciągnąć twoje zasoby.
• czy powinienem zezwolić Rails na obsługę plików statycznych?
  • tak. Jest to zgodne z wytycznymi aplikacji 12factor i zapobiega błędom, jeśli zapomnisz dołączyć plik do tablicy prekompilacji lub jeśli zapomnisz prekompilować.
  • Ustaw config.serve_static_assets = true w szynach 3 i config.serve_static_files = true w szynach 4.
• Jak mogę się upewnić, że mój Javascript/CSS jest dobrze napisany?
  • pisanie wysokiej jakości Javascript i CSS (lub Coffeescript i Sass) może zająć dużo czasu i doświadczenia, ale jedną rzeczą, która bardzo mi pomogła, jest użycie lintera). Niektóre IDE, takie jak Sublime Text, mają wtyczki integrujące lintery. Osobiście korzystam z pakietu SublimeLinter. Jeśli masz zamiar pisać zwykły stary Javascript i CSS, zdecydowanie powinieneś używać lintera.
• jak zmienić katalog, w którym znajdują się moje skompilowane zasoby?
  • możesz zmienić ustawienie config.asset.prefix na inny katalog, na przykład /static.
  • Zmień prefiks zasobu w development.rb, jeśli chcesz śledzić wstępnie skompilowane zasoby w git do użytku produkcyjnego.
  • Zmień prefiks zasobu globalnie, jeśli chcesz używać przestrzeni nazw ścieżek /assets dla kontrolerów.
• Jak mogę obsługiwać zasoby statyczne za pomocą Nginx?
  • podstawowa dyrektywa nginx powinna wyglądać tak (więcej informacji można znaleźć w sekcji Precompiling Assets w przewodniku Rails):

1234567

location ~ ^/assets/ { expires 1y; add_header Cache-Control public; add_header ETag ""; break;}

• co jest jawne.YML lub manifest-.json?
  • manifest.yml (Rails 3) lub manifest-.pliki json (Rails 4) są tworzone automatycznie podczas wstępnej kompilacji zasobów za pomocą rake assets:precompile. Zawierają one informacje o tym, które pliki mają być używane przez aplikację.
• jakie typy plików nie powinny być uwzględniane w potoku aktywów?
  • Zwykle chcesz zachować duże pliki (filmy, dużą liczbę pobrań PDF itp.) w osobnym repozytorium lub w menedżerze plików w chmurze, takim jak AWS S3. Pliki można następnie odwoływać się z aplikacji, ale nie trzeba zapełniać repozytorium git.
• Jak mogę szybciej skompilować Moje zasoby Rails 3?
  • użyj klejnotu turbo-sprockets-rails3.
• Czy mogę korzystać z sieci CDN (content delivery network)dla moich zasobów?
  • tak! Skrót lub odcisk palca, przyrostek na każdym zasobie sprawia, że działają świetnie z CDN. Skonfiguruj CDN do obsługi zasobów z aplikacji Rails, a następnie Ustaw konfigurację config.action_controller.asset_host na odpowiednią domenę dla Twojego CDN (np. config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Zalecam użycie zmiennych środowiskowych, aby ustawić to: config.action_controller.asset_host = ENV.

prawidłowe użycie potoku zasobów może poprawić ogólną jakość aplikacji pod względem wydajności, odporności i czystości kodu. Korzystając z funkcji potoku zasobów, można automatycznie rozwiązać niektóre z największych problemów związanych z kodowaniem i dostarczaniem zasobów statycznych.