Hashowanie plików CSS / JS w Grunt.js

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.

Cookies

Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Czytaj więcej


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/gogomedia/public/blog/wp-includes/functions.php on line 4757

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/gogomedia/public/blog/wp-includes/functions.php on line 4757