Zrozumienie potoku zasobów Rails

Ruby on Rails to framework do tworzenia stron internetowych z pełnym stosem napisany w języku Ruby. Dla programisty, który dopiero rozpoczął pracę z Ruby on Rails, wiele rzeczy będzie wydawało się magicznych, na przykład zmienne instancji zdefiniowane w kontrolerze dostępne dla widoków. Inną taką rzeczą jest potok zasobów, ale czasami tworzy chaos, zwłaszcza przy przenoszeniu rzeczy do produkcji. Proste wyszukiwanie w Google przyniosłoby rozwiązanie w tym czasie, ale nie byłoby to kompletne. Ten post da ci lepsze zrozumienie potoku zasobów Rails, abyś nie czuł się z nim utknął następnym razem.

Rurociąg zasobów Rails

Kod napisany w folderach app/assets i vendor/assets stanowi większość frontonu w dowolnej aplikacji Ruby on Rails. Każdy skrypt JavaScript lub CSS, który piszemy w tym folderze, jest kompilowany i minimalizowany przed udostępnieniem go przeglądarkom w środowisku produkcyjnym. Wszystko to jest obsługiwane automatycznie przez potok zasobów, który jest domyślnie dostarczany wraz z Railsami. Ten potok aktywów jest realizowany przez klejnot zębatek i szyn. Pozwala nam nawet pisać zasoby w innym języku lub preprocesorach i kompilować je do CSS i Javascript zrozumiałych dla przeglądarki.

Aplikacja Ruby on Rails w momencie tworzenia jest dostarczana z dwoma plikami manifestu: application.js i application.css. Te dwa pliki domyślnie zawierają kilka linijek znaczącego kodu, które są uważane za obowiązkowe. Przyjrzyjmy się zawartości tych plików i spróbujmy dowiedzieć się, do czego służą.

Pliki manifestu

/*
* To jest plik manifestu, który zostanie skompilowany do pliku application.css, który będzie zawierał wszystkie pliki
* wymienione poniżej.
*
* Dowolny plik CSS i SCSS w tym katalogu, lib/assets/stylesheets, vendor/assets/stylesheets,
* lub dostawca/zasoby/arkusze stylów wtyczek, jeśli takie istnieją, można odwoływać się tutaj przy użyciu ścieżki względnej.
*
* Możesz dodać do tego pliku style dla całej aplikacji, które pojawią się u góry
* skompilowany plik, ale ogólnie lepiej jest utworzyć nowy plik dla każdego zakresu stylu.
*= wymagaj_siebie
*= drzewo_wymagań .
*/

Jest to domyślny plik manifestu CSS, który zawiera wszystkie wymienione pliki w jednym pliku application.css. Słowo kluczowe require w tym miejscu działa tak samo, jak słowo kluczowe require w ruby. Sprawia, że ​​plik jest dostępny w pliku, z którego jest wywoływany. Słowo kluczowe require szuka najpierw wspomnianych plików w folderze app/assets/, jeśli nie zostanie tam znalezione, będzie szukać w folderze vendor/assets/.

„wymagaj_siebie” i „wymagaj_drzewa”.

'require_self' ładuje całą zawartość tego pliku, z którego jest wywoływany, w naszym przypadku application.css do wiersza, w którym jest wymieniony. „wymagane_drzewo”. ładuje całą zawartość w tym samym folderze, w którym jest przywoływana, w wierszu, w którym jest wymieniona. Jeśli musimy uwzględnić wszystkie pliki z podfolderu, użyj „require_tree ./folder_name/”. Jest to pomocne przy korzystaniu ze zwykłego CSS. Ale jeśli chcemy użyć SASS/SCSS, użyć zmiennych globalnych dla kolorów itp., musimy zaimportować plik CSS używając metody SCSS `@import` zamiast `require`.

Ścieżki zasobów

Nie ma dużej różnicy między app/assets a folderem dostawcy/assets. Zgodnie z konwencją zaleca się używanie folderu app/assets dla niestandardowych plików CSS i Javascript, które tworzymy, oraz folderu dostawcy/assets użytkownika dla CSS i Javascript wszelkich wtyczek innych firm.

Kolejność przeszukiwania zasobów jest następująca:

/aplikacja/zasoby/obrazy

/app/assets/javascripts

/app/assets/stylesheets

/dostawca/zasoby/obrazy

/zasoby/javascripty

/zasoby/arkusz stylów

/[aktywa zawarte w klejnotach]

Wstępna kompilacja zasobów

Aby skompilować wszystkie pliki i je zminimalizować, powinniśmy uruchomić rake assets:precompile. To polecenie inicjuje zadanie rake, które znajduje pliki wymienione w application.css, jeśli są napisane w SCSS/SASS, jest kompilowane do CSS, a następnie dodawane jako część pliku application.css. Ten plik application.css jest połączony z każdą stroną za pomocą tagu linku arkusza stylów, pomocnika widoku szyn. To samo dzieje się z application.js.

Domyślnie plikami manifestu są tylko application.css i application.js, dlatego są one prekompilowane. Ale możemy chcieć użyć jednego lub więcej plików jako plików manifestu dla różnych układów. W takim przypadku pliki te należy dodać do tablicy prekompilacji w config/initializers/asset.rb

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

Tutaj, wraz z plikami application.css i application.js, pliki dashboard.css i dashboard.js są uważane za manifest. Tak więc podczas prekompilacji te pliki są również prekompilowane. Po wstępnej kompilacji te nowo wygenerowane pliki są umieszczane w folderze public/assets.

aplikacja-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

aplikacja-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

aplikacja-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

aplikacja-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

deska rozdzielcza-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

deska rozdzielcza-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

folder publiczny/zasoby

Jest to trzeci folder, w którym możemy znaleźć zasoby w aplikacji railsowej, ale bezpośrednie dodawanie zasobów tutaj nie jest zalecane, chyba że jest to zasób statyczny i nie zmienia się w ogóle. Ponadto nie będziemy mogli odwoływać się do żadnych plików umieszczonych w tym folderze za pomocą helperów url rails. Zasoby są na ogół prekompilowane tylko w środowisku produkcyjnym. Jeśli chcesz wstępnie skompilować zasoby lokalnie, uruchom rake assets:precompile RAILS_ENV=production in local.

deska rozdzielcza-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

deska rozdzielcza-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Jeśli spojrzysz na powyższe nazwy plików, mają one dołączone losowe 64 znaki. Ten proces nazywa się odciskiem palca, co sprawia, że ​​cała nazwa pliku zależy od zawartości pliku. Ta technika jest bardzo pomocna w buforowaniu zasobów. Jeśli zawartość pliku pozostanie taka sama, nazwy plików również pozostaną takie same, dlatego można je buforować. Jeśli zawartość się zmieni, zmieni się nazwa i pamięć podręczna.

Pomocnicy adresów URL zasobów Sass

Za każdym razem, gdy umieścimy jakieś czcionki, obrazy w folderze app/assets, a następnie spróbujemy uzyskać do nich dostęp z plików CSS, SCSS, będzie to działać dobrze w rozwoju. Ale przez większość czasu psuje się w produkcji, mówiąc, że nie znaleziono zasobów /assets/bg-image.jpg. Dzieje się tak zwłaszcza w przypadku dołączanych przez nas pakietów czcionek. Dzieje się tak dlatego, że dalibyśmy coś takiego za obraz tła

obraz w tle: url('/images/header_background.jpg');

W produkcji spróbuje pobrać obraz z /images/header_background.jpg. Ale nie będzie żadnych plików w publicznym folderze o nazwie 'header_background.jpg', chyba że umieścimy plik w publicznym katalogu. Zwykle umieszczamy je w aplikacji/zasobach lub dostawcy/zasobach. Tak więc podczas prekompilacji zostanie on skompilowany, a odcisk palca zostanie dodany do wszystkich zasobów bez js/CSS. W związku z tym wszystkie pliki obrazów, pliki czcionek będą zawierać odciski palców w swojej nazwie, a to nie zadziała.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png logo firmy-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b1800af6a4b4b

Pliki są kompilowane i dodawane, jak pokazano powyżej, w folderze publicznym. Aby odnieść się do tego w CSS, musimy użyć pomocników ścieżki zasobów dostarczanych przez rails. Zamiast 'url('/images/header_backgroung.png')' użyj 'image-url('header_background.png')'. Po wstępnej kompilacji zostanie to dodane jako

obraz w tle: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Mam nadzieję, że ten post pomógł ci zdobyć informacje o potoku zasobów Rails. Lepsze zrozumienie potoku zasobów pomoże Ci utrzymać bardziej uporządkowany i łatwiejszy w utrzymaniu kod związany z front-endem. Jeśli chcesz dowiedzieć się więcej o potoku aktywów, oto link do oficjalnego przewodnika.

Bądź na bieżąco z naszym następnym artykułem, aby dowiedzieć się, czy masz odpowiednie dane do analizy nastrojów

Planujesz pozyskiwać dane z sieci? Jesteśmy tutaj, aby pomóc. Daj nam znać o swoich wymaganiach.