Image for Hashowanie plików CSS / JS w Grunt.js

Hashowanie plików CSS / JS w Grunt.js

Czas czytania:

Pobierane pliki podczas odwiedzania serwisu często przechowywane są  przez przeglądarkę w pamięci podręcznej. Znacząco przyśpieszają wczytywanie strony, a co za tym idzie – zwiększają komfort nawigacji po serwisie. Zdarza się jednak, że z biegiem czasu wprowadzamy różne modyfikacje w kodzie bądź podmieniamy pliki graficzne. Niestety nie będą to modyfikacje widoczne dla użytkowników, którzy wcześniej nie opróżnią pamięci podręcznej w przeglądarce (Ctrl + F5). Dzisiejszy fix dotyczy przekazania przeglądarce informacji o nieaktualnych plikach znajdujących się w cache z wykorzystaniem Grunt.js.

 class=

Zadanie

Automatyczna aktualizacja łączy do plików przy użyciu metody hashowania. Przykładowe użycie metody w pliku index.html:

Ścieżka wejściowa:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Ścieżka wyjściowa:

<link rel="stylesheet" type="text/css" href="css/style.css?v=181ebdf" />

Do swojej pracy potrzebujemy

  • Grunt JS (https://gruntjs.com/)
  • Wtyczka grunt-hash-res (https://github.com/mutian/grunt-hash-res)

Struktura

Przykładowa struktura plików, na której będziemy się opierać.

root
|-- Gruntfile.js
|-- index.html
|-- css
|   |-- style.css
|   |-- reset.css
|-- images
|   |-- svg
|   |-- logo.png
|   |-- background.jpg
|-- package.json

Konfiguracja

Pierwsza rzecz, o której trzeba zacząć to dołączenie wtyczki grunt-hash-res do naszego projektu za pomocą komendy:

npm install grunt-hash-res --save-dev 
npm install

Po tej operacji w pliku package.json znajdziemy dodatkową linijkę:

"grunt-hash-res": "^0.1.4"

Czas na najważniejszą część, czyli konfiguracje zadań. Edytując plik Gruntfile.js wprowadzamy zadania dla naszej wtyczki opierając się na dokumentacji grunt-hash-res.

  hash_res: {
      css: {
        options: {
          resDir: '',
          resReg: [
            /(images\/[^.]+\.(?:png|gif|jpg))(\??)/g,
            /(fonts\/[^.]+\.[\w]+)(\??)/g
          ]
        },
        files: [
          {
            expand: true,
            cwd: 'css',
            src: ['**/*.css'],
            dest: 'css'
          }
        ]
      },
    html: {
      options: {
          resDir: '',
          resReg: [
            /(images\/[^.]+\.(?:png|gif|jpg))(\??)/g,
            /(css\/[^.]+\.(?:css))(\??)/g
          ]
      },
      files: [
        {
          expand: true,
          cwd: '',
          src: ['*.html'],
          dest: ''
        }
      ]
    }
  },

Kod sprawdza pliki html i css pod kątem wystąpień wyrażeń regularnych. Jeśli wzorzec jest znaleziony to sprawdzany jest hash pliku, który następnie dołączony jest do linku.

Podsumowanie

Dzięki automatycznemu dołączania hashu do linku mamy pewność, że przeglądarka pobierze najnowszą wersję pliku, a następnie zapisze ją w pamięci podręcznej. Jest to chyba najprostszy i najwygodniejszy sposób do wymuszenia aktualizacji pamięci podręcznej w przeglądarce.

Zainteresował Cię ten artykuł?

Oferujemy profesjonalne wsparcie programistów w technologii Web.
Może Cię również zainteresować:
Clutch Recognizes GOGOmedia as a 2022 Development Leader in Poland

GOGOmedia is a multidisciplinary team with vast experience in the digital technology space. We deliver… Read More

Zatrzymać użytkownika na stronie — 4 praktyczne sposoby

Tworząc stronę, zadaliście się sobie mnóstwo trudu. Macie dobre teksty, poprawne UX i atrakcyjny design,… Read More