Share
În acest tutorial de ecranare veți afla despre reîncărcarea browserului - în mod automat reîncărcarea automată - și vom lua în considerare trei metode diferite pentru a face acest lucru. Sa incepem!
Să luăm în considerare un flux de lucru tipic pentru front-end: aveți editorul de cod, probabil că scrieți câteva coduri HTML, atunci aveți un CSS care ar putea implica Sass și aveți browserul dvs. pentru testare. De fiecare dată când modificați codul, reveniți la browser, loviți-l reîmprospăta, și văd că modificările au efect.
Poate părea o procedură rapidă, dar adăugați această acțiune revigorantă în timp și o veți găsi destul de risipitoare. Se poate îmbunătăți cu siguranță. Să aruncăm o privire asupra celor trei instrumente care se pot ocupa automat de întregul proces de reîmprospătare.
LiveReload a fost în jur de ceva timp, și este un instrument excelent. Dispune de aplicații pentru Mac OS și Windows și costă (la momentul scrisului) 9,99 USD.
Începeți lucrurile introducând un fragment JavaScript în fișierele pe care lucrați sau le utilizați în combinație cu extensia browserului. Dacă utilizați o extensie a browserului, este posibil să fie necesar să introduceți setările extensiei pentru a vă asigura că aceasta este permite accesul la fișiere este activată.
Dacă vă simțiți confortabil folosind linia de comandă, vă recomandăm să aruncați o privire la această opțiune. Grunt este un alergător de sarcină bazat pe JavaScript și îl puteți utiliza pentru a automatiza multe din sarcinile pe care le-ați avea în mod normal în îngrijire manuală, inclusiv la reîmprospătarea browserului.
Vom folosi pluginul Grunt Watch (numit de fapt "grunt-contrib-watch") pe care va trebui să îl încărcați prin NPM.
Funcția de ceas din gruntfile.js include livereload: adevărat opțiune și vizionează toate fișierele din proiectul meu.
ceas: fișiere: ['*. *'], opțiuni: livereload: true
Din nou, am nevoie de extensia LiveReload în browser-ul meu pentru a fi activată și totul funcționează la fel ca înainte, cu avantajul suplimentar de a putea executa sarcini suplimentare.
Metoda numărul trei, care devine rapid favoritul meu, este Browsersync. Browsersync este mult mai mult decât utilitarul pentru reîncărcarea unei pagini web; de asemenea, vă permite să efectuați testarea browserului sincronizat.
Pentru a face lucrurile în funcțiune, veți avea nevoie de Node.js, deci începeți prin instalarea acestora. Pentru detalii despre cum să obțineți acest lucru, verificați Linia de comandă pentru Web Design: Taming Packages 3rd Party. Cu Nod instalat, instalați Browsersync cu următoarea comandă npm (Node Package Manager):
npm install g- browser-sync
Pentru a utiliza BrowserSync, trebuie să folosim o altă comandă, iar acest lucru se va schimba în funcție de exact ce vrem să facem. De exemplu, această comandă va configura mediul serverului static și va sugera că Browsersync urmărește ca toate fișierele să fie reîmprospătate:
browser-sync start --server --files "*. *"
Pentru mai multe detalii despre diferitele comenzi pe care le puteți utiliza, consultați documentația.
Asta e! Sper că acest tutorial ți-a convins să nu pierzi timpul și să încerci cel puțin una dintre aceste metode de actualizare a browserului. Dacă aveți alte metode preferate, anunțați-ne în comentarii!
Accentsconagua