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

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();
}