Lekce 10 - Jednoduchý redakční systém v Laravel - Laravel Mix

V předešlém cvičení, Řešené úlohy k 5.-9. lekci frameworku Laravel pro PHP, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Jak jsem slíbil, dnes se podíváme na front-end část naší aplikace a zároveň si ji trochu zkrášlíme. Přesněji se zaměříme na kompilaci souborů, jako jsou JavaScript nebo SCSS.

Přidání balíčku

V páté lekci, Jednoduchý redakční systém v Laravel - Struktura projektu, jsme si nainstalovali systém balíčků npm, jenž se nám tentokrát bude hodit. Do našeho projektu si kromě známých front-end frameworků, které balíček Laravel UI zahrnuje a o kterých jsme si pověděli v právě zmíněné lekci, přidáme Font Awesome.

Jedná se o velmi známý framework různých ikonek v podobě fontu, SVG nebo CSS a použití této či podobné kolekce ikonek je dobrým startem na cestě za skvěle vypadající aplikací. Jen se podívejte na různé weby kolem sebe a všimněte si, kolik z nich vlastně používá takovéto frameworky

Font Awesome najdeme i jako balíček na GitHubu. Nemusíme tedy tento framework ručně stahovat či používat jeho on-line verzi, namísto toho však využijeme systému balíčků.

Výhody této volby jsou:

• Možnost upgradu na novou verzi pouze pomocí jednoho příkazu.
• Nezávislost na externím zdroji - Pokud by totiž vypadl server, ze kterého získáváme dané ikonky, stránka by se dlouho načítala (čekala by na odpověď serveru) a následně by se zobrazila bez daných ikonek. To v některých případech může být dosti nepříjemné, například když odkaz na editaci článku je pouhý "obrázek".
• Přehlednost použitých balíčků. Pokud se chceme podívat, jaké všechny balíčky používáme, otevřeme si pouze jeden soubor s jejich seznamem obsahující i verzi.

Avšak tato volba má i jistou nevýhodu:

• Velikost přijatých dat (= delší načítání). Každý uživatel, který přijde na náš web, si musí načíst daleko více dat a to přitom úplně zbytečně. Takovéto frameworky totiž používá nespočet projektů a pokud by každý z nich uchovával vlastní verzi na svém serveru, uživatel by si musel znovu načíst tento soubor při návštěvě jiné aplikace, i když vlastně nějaký podobný má již u sebe v mezipaměti počítače. Proto většina projektů využívá CDN (Content Delivery Network). Při jeho použití si uživatel načte soubor pouze jednou a pokud další web odkazuje na ten stejný server s daným frameworkem, obsah souboru se již načte pouze z mezipaměti uživatelova počítače. Tím se dosáhne rychlejšího načítání a tedy i snížení stažených dat.

Instalace balíčku

Font Awesome si do našeho projektu přidáme jednoduše pomocí následujícího příkazu:

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

Pokud se nyní podíváme na seznam balíčků spravovaných přes npm, který najdeme v souboru package.json v kořenové složce projektu, uvidíme, že přibyl následující řádek pod kategorii devDependencies:

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

Vaše verze Font Awesome se může lišit na základě toho, jaká je poslední stabilní verze.

Kompilace front-end souborů

Nyní, kdy jsme si přidali Font Awesome do našeho projektu, ho musíme někde použít. Na to nám poslouží soubor resources/sass/app.scss, který jsme si ukázali v předešlých lekcích. V něm pouze naimportujeme hlavní soubor daného frameworku a následně i soubor obsahující typ ikonek solid:

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

Laravel Mix

Žádná změna se však na naší stránce zatím neprojeví. SCSS soubory se totiž musí kompilovat. K tomu použijeme Laravel Mix, který je již automaticky zahrnutý v naší aplikaci a je postavený na nástroji Webpack.

V souboru s názvem webpack.mix.js v kořenové složce projektu musíme definovat, co vlastně chceme zkompilovat. Jeho obsah vypadá ze základu následovně:

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 metodách nástroje Laravel Mix, jako jsou js(), scss(), less(), optipng() a další, definujeme zdrojový soubor a následně složku, kam se má zkompilovaná verze umístit. V našem případě nemusíme žádný soubor přidávat, protože jak si můžete povšimnout, již ze základu je soubor app.scss připravený ke kompilaci.

Pokud vás zajímá více možností kompilace a další dostupné metody, doporučuji navštívit oficiální dokumentaci.

Verzování front-end souborů

My si však soubor webpack.mix.js trochu poupravíme. Použijeme totiž také metodu version(), která zajistí, že při každé změně zkompilovaného souboru se následně vygeneruje i jedinečný řetězec, jenž se následně přidá za název souboru. Díky tomuto verzování se při každé změně bude muset uživateli znovu načíst daný soubor, protože si prohlížeč bude myslet, že se jedná o jiný soubor:

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

Možnosti kompilace

Ke zkompilování máme dostupných 5 příkazů:

• npm run dev - Pouze zkompiluje (v módu development) všechny definované soubory ve skriptu webpack.mix.js.
• npm run prod - Zkompiluje všechny definované soubory a minifikuje jejich výstup.
• npm run watch - Tento příkaz běží na pozadí do doby, než ho přerušíme. Kompiluje totiž soubory ihned při jejich změně (v módu development). Hodí se tedy při vývoji, abychom sami nemuseli při každé menší úpravě spouštět některý z příkazů výše.
• npm run watch-poll - Může se stát, že příkaz výše nebude fungovat na některých prostředích. Pokud se potýkáte s těmito problémy, určitě použijte tento příkaz. Funkcionálně a výstupově je totožný s příkazem npm run watch.
• npm run hot - Dokáže zkompilovat a načíst soubor v prohlížeči bez obnovení stránky včetně zachování stavu komponenty. Hodí se tedy také při vývoji. Protože je ale jeho nastavení trochu složitější, nebudeme se mu v tomto kurzu věnovat.

Jelikož náš design nepotřebujeme nijak ladit, spustíme příkaz npm run prod. Následně uvidíme tento výstup s výpisem všech zkompilovaných souborů:

Dostáváme také upozornění, že některé soubory jsou příliš velké. V případě Font Awesome to tolik nevadí, jelikož obsahuje všechny možné ikonky. Problém se souborem js/app.js bychom však měli vyřešit odstraněním nepotřebných knihoven, tím se ale zabývat nebudeme.

Využívání verzování v pohledech

Ve složce public/ se nám vytvořil soubor mix-manifest.json, který obsahuje výše zmíněné náhodné řetězce pro verzování. Jeho obsah může vypadat nějak takto:

{
    "/js/app.js": "/js/app.js?id=201f562f17b5ceef561b",
    "/css/app.css": "/css/app.css?id=c86f7d0f4bac7ccfc8c5"
}

Určitě vás zajímá, jak s tímto souborem vlastně můžeme vůbec pracovat. Pojďme se na to nyní ihned podívat. Otevřeme si náš hlavní pohled resources/views/base.blade.php a v HTML hlavičce použijeme helper funkci mix() namísto asset():

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

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

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

Pokud nyní zavítáme na naší stránku a prozkoumáme HTML kód přes "Inspect element" (klávesa F12 na klávesnici), výstup naší šablony výše bude vypadat následovně:

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

<script src="/js/app.js?id=201f562f17b5ceef561b"></script>

Vylepšení výpisu článku

Jelikož již nyní ovládáme přidávání balíčků a kompilaci front-end souborů, můžeme této zkušenosti využít i na naší aplikaci - přesněji na výpisu článku. Ten aktuálně vypadá dosti chudě a neobsahuje mnoho informací. Abychom si tedy ukázali, že naše kompilace proběhla opravdu v pořádku, přidáme do něj datum změny spolu s ikonkou kalendáře a upravíme si jeho vzhled v pohledu 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ásledně si však také definujeme CSS pravidla pro třídy, které jsme použili v pohledu výše. Tyto vlastnosti přidáme do již zmíněného SCSS souboru resources/sass/app.scss a opět ho zkompilujeme pomocí pří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ýsledek našeho snažení vypadá následovně:

Jak si můžete povšimnout, i Font Awesome nám nádherně funguje. To je však pro tuto lekci vše.

Příště, v lekci Jednoduchý redakční systém v Laravel - Práce s datem, budeme pokračovat ve zlepšování našeho projektu. Povíme si totiž něco o práci s datem a vytvoříme si hlavní stránku naší aplikace.

 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.