Laravel: Kompilacja i linkowanie zasobów

5.8.x

0:00Chociaż laravel jest frameworkiem skupiającym się na backend'zie to

0:04oczywiście większość backend'ów musi mieć jakiś frontend i teraz w zależności

0:09tego na ile jesteś zaznajomiony z nowoczesnym workflow we

0:13frontend'zie, na ile pracujesz z narzędziami typu webpack czy gulp na

0:17tyle będziesz w stanie lepiej zautomatyzować tworzenie frontend'u,

0:21być może w ogóle nie zajmujesz tworzeniem frontend'u i nie będzie to twój problem, ale chciałbym

0:25ci jednak pokazać w jaki sposób można pracować z frontend'em z użyciem laravel.

0:30Po pierwsze co jest super istotne, to wiemy że nasze zasoby frontend'owe

0:34czyli CSS, obrazki czy JavaScript są serwowane z katalogu public,

0:38oznacza to tylko tyle, że ty możesz bezpośrednio w tym katalogu tworzyć na przykład CSS

0:43i jest okej natomiast jeżeli będziesz go tworzył użyciem Sass i schowasz

0:48sobie to w resouces, po to żeby ten Sass nie był dostępny publicznie w katalogu public to

0:53musisz mieć jakiś sposób jak ten  Sass skompilować i wstawić tutaj do public

0:58bo dopiero stąd jest linkowany na naszej stronie. Możesz ten workflow dowolnie

1:02sobie skonfigurować. Jeżeli kiedykolwiek korzystałeś z gulp'a, możesz gulp'a sobie

1:06ustawić tak żeby brał na przykład ten plik main.scss, kompilował

1:10go, używał na przykład autoprefixer'a żeby dodawać tak

1:14zwane vendor prefixes do CSS i wstawiać to w to miejsce, czyli

1:18jest tutaj zupełna dowolność, ale co ciekawe laravel oferuje nam coś

1:22takiego jak mix i mix jest to pewna warstwa abstrakcji nad

1:27webpack'iem i dlatego tutaj znajduje się taki plik jak webpack

1:31ix js który pozwala nam definiować co się ma

1:35tak naprawdę dziać jeżeli chodzi o te zasoby frontend'owe. Możesz

1:39zauważyć, że tutaj mamy bardzo prosty taki ekspresyjny zapis, czyli

1:44mówimy mix js, a więc weź plik z resources js app

1:48i wstaw go do public js weź plik sass

1:52z takiej ścieżki i wstaw to do public css. Taki

1:56jeden zapis tutaj wystarczy, aby plik JavaScript'owy był odpowiednio kompilowany i

2:01co ważne tutaj będzie zachodzić również kompilacja ze standardu ECMAScript6, z ECMAScritpt5

2:06z użyciem odpowiednich bibliotek babel cli, rzeczy które

2:10można zrobić w webpack'u i znowu zależy na ile się na tym znasz. Jeżeli

2:14się tym znasz to na pewno wiesz o czym mówię, okej, czyli tak samo możemy

2:18pracować z Sass, automatycznie autoprefixer jest tutaj dodawany i wiele

2:22innych rzeczy. Jak widzisz również jest ten plik package json, a to oznacza

2:27że możemy wpisać npm install i zainstalować wszystkie zależności które tutaj

2:31się znajdują a następnie skorzystać z jednego ze skryptów wpisując na przykład npm run watch. Uruchomi

2:37się taki deweloperski można powiedzieć serwer i będzie nasłuchiwał na zmiany w

2:41plikach więc za każdym razem kiedy w plikach źródłowych, czyli na przykład w sass

2:45albo w javascripcie coś zmienimy będą one kompilowane tutaj do tego

2:49katalogu public czy w zasadzie dokładnie w miejsce które wskażemy w tym

2:54pliku. Zanim jednak cokolwiek zrobimy ja chciałbym tutaj wkleić moją

2:58konfigurację i szybko ją wytłumaczę, disable notifications to

3:02jest tylko po to żeby nam nie wyświetlało różnych powiadomień które

3:06mogą czasami irytujące. Następna rzecz którą chcę tutaj skonfigurować i to

3:11ważne że te rzeczy możesz znaleźć dokumentacji mix na stronie laravel

3:15jest browserSync i to jest kolei narzędzie które pozwala nam automatycznie przeładować

3:20stronę kiedy coś zmieni w naszych zasobach albo na przykład tę samą stronę otworzyć

3:24na wielu różnych przeglądarkach kiedy powiedzmy na jednej stronie scrollujemy, scrolluje

3:29się na wszystkich. Naprawdę bardzo wygodne rozwiązanie, być może znane ci z

3:33innych narzędzi albo po prostu bezpośrednio z niego korzystałeś, warto

3:37wiedzieć że tutaj można z niego korzystać i teraz browserSync będzie uruchamiane

3:41na osobnym porcie, więc ja zdefiniował em 3002, podaje tutaj domenę

3:45która ma być jakby przekierowywana, czyli gdzie ma być proxy

3:49robione, open false i notify false, open po to żeby nie otwierać domyślnej

3:53przeglądarki kiedy się to wszystko uruchomi a notify po to aby na stronie nie pokazywać

3:58powiadomień że na przykład jakiś plik się zmienił. Teraz możemy tutaj zrobić

4:02taką rzecz nie jak mix.inProduction. Jeżeli nie jesteśmy

4:06w produkcji mix będzie wiedział kiedy będziemy wykonywać skrypty produkcyjne, bo będzie

4:10to na przykład script run prod. Natomiast

4:15jeżeli wykonujemy development czy watch to wtedy nie jesteśmy w produkcji,

4:19to wtedy ja chcę dodawać są source mapy i source mapy pozwolą nam podejrzeć

4:24w narzędziach deweloperskich, gdzie coś w danym pliku się działo, czyli nie

4:28będziemy widzieć pliku main.css ale na przykład plik message

4:32scss i kolejna rzecz to jest właśnie wskazanie

4:36już naszym przypadku na konkretny plik sass'owy czyli main scss, proszę

4:41śledź zmiany w tym pliku i wyrzucaj to do katalogu

4:45public css, version oznacza, że również chcemy tutaj tworzyć

4:49source mapę, okej i jeżeli coś takiego sobie już

4:53tutaj ustawimy to teraz musimy zainstalować wszystkie zależności. Jedna

4:57ważna uwaga, my sobie zainstalowaliśmy laravel homestead po

5:01to, żeby to była maszyna, która ma preinstalowane php mysql,

5:05wiele innych rzeczy, ale tam również jest zainstalowany note, dlatego to co teraz

5:09zrobię możemy uruchomić wewnątrz naszej maszyny wirtualnej, ale

5:13z tego tytułu będą pewne konsekwencje i może

5:17ja od razu powiem o co chodzi. Jeżeli masz Maca albo pracujesz na Linuxie, nie

5:22ma żadnego problemu. Jeżeli pracujesz na Windowsie to niestety będziemy mieli taki

5:26problem że jeżeli uruchomimy sobie na przykład to browserSync wewnątrz

5:30tej maszyny wirtualnej to kiedy my będziemy z naszego systemu, czyli

5:34z Windowsa bo mówimy tutaj o Windowsie. Kiedy w Windowsie ty

5:39coś będziesz zmieniał w tych plikach to ta maszyna wirtualna nie będzie stanie wyłapać tych

5:43zmian i na przykład odświeżyć ci przeglądarki. Na Macu i na Linuxie

5:47będzie to możliwe jeżeli zainstalujemy sobie do vagranta taki plugin. Wystarczy

5:51że w terminalu wpiszesz vagrant plugin install vagrant notify forwarder. Tyle

5:56wystarczy i to będzie działać. Dlatego ja siebie mogę spokojnie uruchomić to

6:00co tutaj mamy czyli npm install, wewnątrz maszyny wirtualnej, a zmieniać

6:05pliki na zewnątrz. Natomiast jeżeli ty jesteś na Windowsie to musisz mieć

6:09w Windowsie zainstalowany note i będąc tutaj przechodząc

6:13terminala właśnie w Windowsie, a nie wewnątrz wirtualnej maszyny wpiszesz

6:18to co ja wpiszę za moment i ja zatem na Macu

6:22czy na Linuxie mogę zrobić tak że nie muszę mieć note zainstalowane

6:26w moim systemie, bo ono jest zainstalowane wewnątrz wirtualnej maszyny. Zatem przyjdziemy

6:30sobie teraz do terminala i będąc wewnątrz wirtualnej maszyny wpisze

6:35npm install i to sprawi że wszystkie należności z pliku

6:39package json zostaną zainstalowane i będziemy mogli uruchomić

6:43sobie ten serwer wpisując npm run watch. Okej,

6:49zatem wpisuje npm install i będziemy musieli chwilę poczekać pamiętaj, że jeżeli jesteś na Windowsie

6:53musisz wpisać to polecenie, ale terminalu, który nie jest wewnątrz

6:57wirtualnej maszyny, ale u ciebie w systemie. Okej,

7:01wszystko się zainstalowało i teraz możemy wpisać npm run watch i

7:06to wykona nam ten oto skrypt, zobaczymy okej

7:12bo jakieś finito się uruchomiło i teraz co to dla nas oznacza. Otóż

7:16dla mnie uruchomiłem to wewnątrz wirtualnej maszyny i dla ciebie jeżeli uruchomiłeś

7:21to na zewnątrz wirtualnej maszyny w Windows'ie, oznacza to tylko tyle, że

7:25możemy przyjść teraz pod zdefiniowany wcześniej przez nas adres i może

7:30to być larablogger.test:3002, ważne żeby IP byłO odpowiednie, więc

7:34wiemy, że ten host kieruje tam gdzie kierować powinien. Jeżeli tam przyjdziemy, to

7:38również wczyta to się nasza strona, ale ona teraz będzie się automatycznie odświeżać jeżeli

7:42coś zmienimy, więc co możemy zmienić. Widzimy

7:47że tutaj śledzimy zmiany na przykład w pliku SCSS. Czyli

7:52jeżeli ja bym tutaj przeszedł do sass i na przykład do Helpers,

7:59tutaj mam viariables i mam zdefiniowaną taką zmienną sass, która mówi jaki

8:03jest kolor tła. Jeżeli zamienie na kolor czerwony, zapisze i od

8:07razu bardzo szybko przyjdę przeglądarki zauważ nic nie naciskam kompletnie zostało

8:12to automatycznie odświeżone, nawet strona się nie odświeżyła tylko style zostały wstrzyknięte i

8:16co ważne działają tutaj source mapy, o których wspominałem wcześniej, bo jeżeli

8:20sobie podejdziemy body to od razu widzimy w tym miejscu że w pliku general.scss

8:25jest zdefiniowany ten kolor i dokładnie tak też się dzieje bo jeżeli

8:29byśmy przeszli do general.scss, w linijce 11,

8:34tutaj jest zdefiniowany właśnie ten kolor, więc wycofam te zmiany ale to

8:38już ci pokazuję że faktycznie po

8:42zapisaniu automatycznie to się odświeża. Jeżeli zmienimy coś jakimś widoku blade powinno

8:47to zostać również automatycznie odświeżone więc przejdźmy na przykład do posts,

8:51zapisuje ten plik i tym strona już całkowicie się

8:55przeładowuje ale jak widzisz bez problemu to działa więc tak można wygodnie pracować

8:59na nad frontend'em. Natomiast na koniec pokażę ci jeszcze jedną

9:04bardzo ważną rzecz, mianowicie w momencie kiedy skorzystaliśmy z mix'a

9:08czyli kiedy wykonałem npm run watch w pliku mix

9:13manifest pojawiło się coś takiego. Ten plik w zasadzie został utworzone tutaj w

9:18public i pojawiło się tutaj coś takiego, czyli wygenerowało dla nas plik main.css,

9:23a więc podało go również tutaj, razem z taką oto ścieżką,

9:27z takim query stringiem. Tutaj jest hash tego pliku zapisany i to oznacza,

9:32że jeżeli cokolwiek w pliku się zmieni, a to z kolei oznacza, że cokolwiek

9:36się zmieniło gdzieś indziej w naszych plikach źródłowych, wtedy ten hash również

9:40będzie zmieniony, więc super byłoby linkować właśnie coś takiego, w naszym

9:45pliku master, dzięki temu jeżeli cokolwiek zmienimy w CSS'ie i

9:49wstawimy nową wersję naszej strony na produkcję, to każdy kto w nią wejdzie będzie

9:54musiał pobrać ten plik czyli przeglądarka kiedy zobaczy że tutaj jest inne id to

9:59jest to tak naprawdę inny adres i ten plik będzie musiał pobrać od nowa u takiego

10:03użytkownika. Dzięki temu unikniemy problemu, że my coś zmieniliśmy w CSS'ie, a

10:07nasi użytkownicy cały czas mają serwowaną wersję pamięci z podręcznej przeglądarki. Natomiast

10:12w jaki sposób można to podlinkować, skopiujemy sobie ten adres, który jest tutaj. Przejdziemy

10:17teraz do master i w miejscu u góry gdzie korzystaliśmy z takiego

10:21na sztywno zapisu wykorzystany funkcje mix, która

10:25jest dostępna i w tejże funkcji mix podam tą ścieżkę. Ta

10:30funkcja robi bardzo prostą rzecz. Podaną ścieżkę wyszukuje w json'nie

10:35tutaj i zwraca to co jest na niej przypisane po prawej stronie, więc jeżeli teraz

10:39odświeżymy i podejrzymy źródło strony to CSS jest linkowany

10:43w taki oto sposób i zapewniam cię że jeżeli cokolwiek się tym pliku zmieni to

10:48ta ścieżka również zostanie tutaj zmieniona w zasadzie to id zostanie modyfikowane

10:52i taki plik będzie musiał się pobrać od nowa u każdego użytkownika.