Browser-sync

Browser-sync er et testredskab vi har brugt under udvikling af vores projekter.

Browser-sync er et værktøj som hjælper os med at teste og udvikle vores hjemmesider. Det fungere ved at lave en lokal server på vores enhed, og så indsætter den et stykke Javascript på vores side.

Det giver os bl.a. mulighed for at lave live reload af siden, så vi kan se vores CSS ændringer, uden at skulle genindlæse siden.

Ovenikøbet får vi en ip adresse som vi kan tilgå fra andre enheder, så vi kan teste siden på flere forskellige enheder, samtidigt.

Det er også muligt at simulere langsomme forbindelse, så man kan se sidens performance på f.eks. mobilnetværk.

Kode

I vores gulpfile.js kører vi browser-sync, sammen med vores watch function, som konvertere vores SCSS til CSS, samt minificere vores Javascript.

Udover dette har vi tilføjet en watcher på vores .html filer, så når der sker en ændring, så skal browser-sync, genindlæse siden.

I vores gulp watch starter vi også vores browser-sync. Her har vi angivet at serveren skal starte i root af vores directory, hvilket vil resulterer i at vores index.html bliver vist, ligesom hvis man hoster siden på et webhotel.