TIP: Ako zneplatniť staré CSS/JS súbory pomocou Laravel Mix

xvital
napísal @xvital (297), pred 4 mesiacmi, posledná úprava 12.4.2019 11:04

V rámci projektu ste previedli úpravy, ktoré sa týkajú CSS alebo JS externých súborov, ktoré na webe linkujete. Úpravy ste nasadili do produkcie, ale štýly celkom nesedia. Pre vás jednoduchá situácia – pomôže premazať cache prehliadača a všetko je v poriadku. Ako však invalidovať linkované súbory u vaších návštevníkov a donútiť ich prehliadače načítať nové?

Najčastejšie v podobnej situácii asi zvyknete pridať za názov súboru niečo ako ?v=1.1 alebo podobne. Buď staticky – natvrdo za názov súboru niečo v rámci query stringu dopíšete, aby sa zmenil jeho názov, čo donúti prehliadač nanovo súbor načítať, alebo dynamicky - napr. timestamp.

<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}?v=1.1" />

Laravel Mix však ponúka omnoho jednoduchšie a dynamickejšie riešenie, vďaka ktorému sa viac nebudete musieť o verzovanie linkovaných súborov starať. Ak teda kompilujete vaše scss/less/sass/js súbory pomocou Laravel Mix, je to veľmii jednoduché. Celé riešenie spočíva v dvoch krokoch.

  1. V rámci receptu na kompiláciu použijete navyše funkciu version().
    mix.sass('resources/assets/sass/app.scss', 'public/css').version();
  2. V linku generujeme názov súboru miesto helperu asset() helperom mix() - ten sa postará o to, aby bola za názov súboru pridaná aktuálna verzia súboru.
    <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}" />

To je všetko. Novo vygenerované súbory budú automaticky invalidovať staré.

Verzovanie len pre produkciu

Vďaka Mixu môžete generovať novú verziu len v kompilácii pre produkciu (cli príkaz npm run production). Ak teda používate npm watcher (npm run watch), nemusí sa generovať nová verzia pri každej úprave. Stačí na to jednoduchá podmienka v mix súbore:

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

if (mix.inProduction()) {
    mix.version();
}

Ešte nie si členom CZ/SK Laravel komunity?

To možeš ľahko zmeniť. Registrácia je zdarma a ako registrovaný člen získaš množstvo výhod. Prečítaj si prečo by si mal byť členom.

Prihlásiť sa Zaregistrovať

Mohlo by Ťa zaujímať: