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.

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.