Powrót do kategorii
Frontend
tagi
cache, css, grunt, hash, js,

Hashowanie plików CSS / JS w Grunt.js

GOGO.Developer, 22/06/2017

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

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.

Podobne artykuły

Wykorzystanie Redis 3 jako systemu cache’ującego w Zend Framework 2

Optymalizacja wydajności aplikacji opartych na Zend Framework 2 z wykorzystaniem Redis.

Jak stworzyć automatyczną dokumentację CSS?

O tworzeniu dokumentacji przy pomocy DSS oraz Grunt.js.

Poznajmy się
Poznajmy się
Chcesz porozmawiać o start-upach, projektach lub programowaniu?

GOGOmedia Sp. z o.o.
ul. Klimczaka 1
02-797 Warszawa

+48 22 378 47 27
GOGOmedia
GOGOmedia
Internet Software House

Jesteśmy internetową firmą technologiczną, dostarczamy kompletne rozwiązania informatyczne z zakresu web aplikacji. Kompleksowo obsługujemy klientów z różnych sektorów biznesu w zakresie dedykowanego oprogramowania. Prowadzimy szkolenia, doradzamy, wykonujemy specjalistyczne audyty i dzielimy się zdobytą przez lata wiedzą. Dla wielu jesteśmy partnerem, który pomaga osiągać wyznaczone cele biznesowe w najbardziej optymalny sposób.

Polecamy
Polecamy
narzędzia wspierające naszą codzienną pracę
  • New Relic
  • CloudFlare
  • JIRA
  • Bamboo
  • Axure
  • Zendesk
  • Microsoft Project