10. diel - Jednoduchý redakčný systém v Laravel - Laravel Mix

V minulej lekcii, Jednoduchý redakčný systém v Laravel - Správa článkov , sme dokončili administráciu článkov a ako som sľúbil, dnes sa pozrieme na front-end časť našej aplikácie a zároveň si ju trochu skrášlime. Presnejšie sa zameriame na kompiláciu súborov, ako sú JavaScript alebo SCSS, a pridávanie balíčkov do nášho projektu.

Pridanie balíčku

V piatej lekcii, Jednoduchý redakčný systém v Laravel - Štruktúra projektu, sme si nainštalovali systém balíčkov NPM, ktorý sa nám tentoraz bude hodiť. Do nášho projektu si okrem známych front-end frameworkov, ktoré Laravel zahŕňa ao ktorých sme si povedali v práve spomínané lekcii, pridáme Font Awesome.

Jedná sa o veľmi známy framework rôznych ikoniek v podobe fontu, SVG alebo CSS a použitie tejto či podobnej kolekcie ikoniek je dobrým štartom na ceste za skvelo vyzerajúci aplikácií. Len sa pozrite na rôzne weby okolo seba a všimnite si, koľko z nich vlastne používa takéto frameworky

Font Awesome nájdeme aj ako balíček na GitHub. Nemusíme teda tento framework ručne sťahovať či používať jeho on-line verziu, namiesto toho však využijeme systému balíčkov.

Výhody tejto voľby sú:

• Možnosť upgradu na novú verziu iba pomocou jedného príkazu.
• Nezávislosť na externom zdroji - Ak by totiž vypadol server, z ktorého získavame danej ikonky, stránka by sa dlho načítala (čakala by na odpoveď servera) a následne by sa zobrazila bez daných ikoniek. To v niektorých prípadoch môže byť dosť nepríjemné, napríklad keď odkaz na editáciu článku je obyčajný "obrázok".
• Prehľadnosť použitých balíčkov. Ak sa chceme pozrieť, aké všetky balíčky používame, otvoríme si iba jeden súbor s ich zoznamom obsahujúci aj verziu.

Avšak táto voľba má aj istú nevýhodu:

• Veľkosť prijatých dát (= dlhšia načítanie). Každý užívateľ, ktorý príde na náš web, si musí načítať ďaleko viac dát a to pritom úplne zbytočne. Takéto frameworky totiž používa nespočet projektov a ak by každý z nich uchovával vlastnú verziu na svojom serveri, používateľ by si musel znovu načítať tento súbor pri návšteve iné aplikácie, aj keď vlastne nejaký podobný má už pri sebe vo vyrovnávacej pamäti počítača. Preto väčšina projektov využíva CDN (C ontent D elivery N etwork). Pri jeho použití si užívateľ načíta súbor iba raz a ak ďalšie web odkazuje na ten rovnaký server s daným frameworkom, obsah súboru sa už načíta len z vyrovnávacej pamäte užívateľovho počítača. Tým sa dosiahne rýchlejšieho načítanie a teda aj zníženie stiahnutých dát.

Inštalácia balíčka

Font Awesome si do nášho projektu pridáme jednoducho pomocou nasledujúceho príkazu:

npm install --save-dev @fortawesome/fontawesome-free

Ak sa teraz pozrieme na zoznam balíčkov spravovaných cez NPM, ktorý nájdeme v súbore package.json v koreňovom priečinku projektu, uvidíme, že pribudol nasledujúci riadok pod kategórii devDependencies:

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "axios": "^0.19",

Vaša verzia Font Awesome sa môže líšiť na základe toho, aká je posledná stabilná verzia.

Kompilácie front-end súborov

Teraz, keď sme si pridali Font Awesome do nášho projektu, ho musíme niekde použiť. Na to nám poslúži súbor resources/sass/app.scss, ktorý sme si ukázali v predošlých lekciách. V ňom iba importujete hlavný súbor daného frameworku a následne aj súbor obsahujúci typ ikoniek solid:

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';

Laravel Mix

Žiadna zmena sa však na našej stránke zatiaľ neprejaví. SCSS súbory sa totiž musí kompilovať. K tomu použijeme Laravel Mix, ktorý je už automaticky zahrnutý v našej aplikácii a je postavený na nástroji Webpack.

V súbore s názvom webpack.mix.js v koreňovom priečinku projekte musíme definovať, čo vlastne chceme skompilovať. Jeho obsah vyzerá zo základu nasledovne:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

V metódach nástroje Laravel Mix, ako sú js(), scss(), less(), optipng() a ďalšie, definujeme zdrojový súbor a následne priečinok, kam sa má zostavila verzie umiestniť. V našom prípade nemusíme nič pridávať, pretože ako si môžete všimnúť, už zo základu je súbor app.scss pripravený ku kompilácii.

Ak vás zaujíma viac možností kompilácie a iné dostupné metódy, odporúčam navštíviť oficiálne dokumentáciu.

Verziovanie front-end súborov

My si však súbor webpack.mix.js trochu poupravíme. Použijeme totiž tiež metódu version(), ktorá zaistí, že pri každej zmene zkompilovaného súboru sa následne vygeneruje aj jedinečný reťazec, ktorý sa následne pridá za názov súboru. Vďaka tomuto verziovanie sa pri každej zmene bude musieť užívateľovi znova načítať daný súbor, pretože si prehliadač bude myslieť, že ide o iný súbor:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

Možnosti kompilácie

Ku skompilovaniu máme dostupných 5 príkazov:

• npm run dev - Iba skompiluje (v móde development) všetky definované súbory v skripte webpack.mix.js.
• npm run prod - skompiluje všetky definované súbory a minifikuje ich výstup.
• npm run watch - Tento príkaz beží na pozadí do doby, než ho prerušíme. Kompiluje totiž súbory ihneď pri ich zmene (v móde development). Hodí sa teda pri vývoji, aby sme sami nemuseli pri každej menšej úprave spúšťať niektorý z príkazov vyššie.
• npm run watch-poll - Môže sa stať, že príkaz vyššie nebude fungovať na niektorých prostrediach. Ak sa stretávate s týmito problémami, určite použite tento príkaz. Funkcionálne a Vystupovať je totožný s príkazom npm run watch.
• npm run hot - Dokáže skompilovať a načítať súbor v prehliadači bez obnovenia stránky vrátane zachovania stavu komponenty. Hodí sa teda tiež pri vývoji. Pretože je ale jeho nastavenie trochu zložitejšie, nebudeme sa mu v tomto kurze venovať.

Keďže náš dizajn nepotrebujeme nijak ladiť, spustíme príkaz npm run prod. To bude pri prvom použití nejakú chvíľu trvať - musí sa tiež doinštalovať dodatočné závislosti. Následne však uvidíme tento výstup s výpisom všetkých skompilovaných súborov:

Dostávame tiež upozornenie, že niektoré súbory sú príliš veľké. V prípade Font Awesome to toľko nevadí, pretože obsahuje všetky možné ikonky. Problém so súborom js/app.js by sme však mali vyriešiť odstránením nepotrebných knižníc, tým sa ale zaoberať nebudeme.

Využívanie verzovania v pohľadoch

V priečinku public/ sa nám vytvoril súbor mix-manifest.json, ktorý obsahuje vyššie zmienené náhodné reťazca pre verzovanie. Jeho obsah môže vyzerať nejako takto:

{
    "/js/app.js": "/js/app.js?id=8f8d69030540ce047ade",
    "/css/app.css": "/css/app.css?id=e4df60a8d980d281fb61"
}

Určite vás zaujíma, ako s týmto súborom vlastne môžeme vôbec pracovať. Poďme sa na to teraz ihneď pozrieť. Otvoríme si náš hlavný pohľad resources/views/base.blade.php a v HTML hlavičke použijeme helper funkciu mix() namiesto asset():

    <title>@yield('title', env('APP_NAME'))</title>

    <link href="{{ mix('css/app.css') }}" rel="stylesheet" />

    <script src="{{ mix('js/app.js') }}"></script>
</head>

Ak teraz zavítame na našu stránku a preskúmame HTML kód cez "Inspect element" (kláves F12 na klávesnici), výstup našej šablóny vyššie bude vyzerať nasledovne:

<link href="/css/app.css?id=e4df60a8d980d281fb61" rel="stylesheet">

<script src="/js/app.js?id=8f8d69030540ce047ade"></script>

Vylepšenia výpisu článku

Keďže už teraz ovládame pridávanie balíčkov a kompiláciu front-end súborov, môžeme tejto skúsenosti využiť aj na našej aplikácii - presnejšie na výpise článku. Ten aktuálne vyzerá dosť chudobne a neobsahuje veľa informácií. Aby sme si teda ukázali, že naše kompilácia prebehla naozaj v poriadku, pridáme do neho dátum zmeny spolu s ikonkou kalendára a upravíme si jeho vzhľad v pohľade resources/views/article/show.blade.php:

@extends('base')

@section('title', $article->title)
@section('description', $article->description)

@section('content')
    <article class="article">
        <header>
            <h1 class="display-4 mb-0">{{ $article->title }}</h1>
            <p class="lead">{{ $article->description }}</p>
        </header>

        <div class="article-content">{!! $article->content !!}</div>

        <footer>
            <p class="small text-secondary border-top pt-2 mt-4"><i class="fa fa-calendar"></i> {{ $article->updated_at }}</p>
        </footer>
    </article>
@endsection

Následne si však tiež definujeme CSS pravidlá pre triedy, ktoré sme použili v pohľade vyššie. Tieto vlastnosti pridáme do už spomínaného SCSS súboru resources/sass/app.scss a opäť ho skompilujeme pomocou príkazu npm run prod:

.article {
  font-family: Arial, sans-serif;
}

.article .lead {
  font-size: 1.35rem;
}

.article > .article-content {
  font-size: 1rem;
  text-align: justify;
}

Výsledok nášho snaženia vyzerá nasledovne a ako si môžete všimnúť, aj Font Awesome nám nádherne funguje:

To je pre túto lekciu všetko. Nabudúce, v lekcii Riešené úlohy k 5.-9. lekciu frameworku Laravel pre PHP , budeme pokračovať v zlepšovaní nášho projektu. Povieme si totiž niečo o prácu s dátumom a vytvoríme si hlavnú stránku našej aplikácie.

V nasledujúcom cvičení, Riešené úlohy k 5.-9. lekciu frameworku Laravel pre PHP, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.