CSS wijzigingen inzien met LiveReload in Ubuntu

Ben je zat elke keer handmatig de pagina te moeten verversen om je wijzigingen te zien? Of is simpelweg je F5 knop kapot? Geen stress het kan automatisch!

Om je css wijzigingen direct in de browser te zien zonder te refreshen kun je LiveReload gebruiken. Dit is iets wat je moet installeren op je systeem, de server en je browser. In dit blog leggen we je uit hoe je dit installeert in Ubuntu.

Waarschuwing: technisch blog! Zegt Ubuntu je he-le-maal niks? Sla deze blog dan over.

Waarom LiveReload gebruiken in Ubuntu?

Het is heel fijn om als ontwikkelaar direct je CSS wijzigingen in de browser te zien. LiveReload is voor Ubuntu gebruikers een goede en praktische oplossing om dit te kunnen doen!

Systeem: Installeer Guard LiveReload (en software)

Om Guard LiveReload op je Ubuntu systeem te installeren dien je eerst de volgende commando’s in je lokale terminal uit te voeren:

sudo apt-get install ruby-dev
sudo gem install bundle
sudo gem install guard
sudo gem install guard-livereload

In je locale projectmap, in mijn geval is het een Docker, moet je het volgend commando uitvoeren:

bundle init

Dit commando maakt een bestand aan genaamd Gemfile. In dit bestand zal je de volgende zaken moeten toevoegen:

gem 'guard'
gem 'guard-livereload'

Vervolgens kan je in je lokale terminal verder met:

bundle exec guard init livereload

Ook dit commando maakt een bestand aan. Ditmaal heet het Guardfile en ook hier moeten zaken toegevoegd worden:

watch(%r{.+.(css|js|html|php)$})

Bovenstaande moet toegevoegd worden onder de andere ‘watch’ regels maar voor ‘end’.

De laatste stap in je locale terminal is het uitvoeren van het volgend commando:

bundle exec guard

Dit commando moet je elke keer uitvoeren in de terminal in de projectmap om LiveReload te kunnen gebruiken.

Voor windows en Mac kan je de software hier downloaden: LiveReload.com

Server: installeer LiveReload via NPM

Om LiveReload op de server te installeren draai je in de server terminal het volgende commando:

npm install -g livereload

Wanneer je dit gedaan hebt dien je livereload.js in de root van je project te plaatsen, hier kan je livereload.js vinden.

Vervolgens moet je van je thema een layout bestand aanpassen en daar het volgend in plaatsen tussen de <head> tags:

<script src="http://{IP_VAN_DE_SERVER}:35729/livereload.js" src_type="url"></script>

Let op: Je moet hier wel {IP_VAN_DE_SERVER} vervangen door het IP-adres van de server.

Browser: Installer LiveReload Extensie

De browser extensie voor Chrome kan je hier vinden, die voor Firefox hier. Installeer de extensie die je nodig hebt om de LiveReload configuratie te voltooien.

Als je nu de css aanpast en dit opgepakt wordt door Grunt, dan wordt dit automagisch door je browser opgepakt zonder dat je F5 hoeft in te toetsen of op Refresh in de browser.

Als het goed is werkt het nu

Geef jezelf een schouderklopje en ga rustig even naar je CSS kijken, je hebt het verdiend!

via GIPHY

Delen?

Meer informatie over dit onderwerp? Mark maakt je volledig webwijs. Keertje afspreken?

Neem contact op

Mogen we jou ook webwijs maken? We zitten vol frisse idee├źn waar we jou graag verder mee helpen.

Daag ons uit
Boyd