Share
Når du arbeider på et statisk område, kan livet ditt bli enklere hvis du har en enkel måte å aktivere en lokal forhåndsvisning på.
Hva som er enda bedre er om denne lokale forhåndsvisningen har en live reload-funksjon, slik at du automatisk ser at endringene dine får virkning når du jobber. Og enda bedre enda, hvis det lar deg se nettstedet ditt via en http: // protokoll, gitt at noen ganger ting ikke fungerer som forventet når de vises over a fil:// protokollen.
Det er flere måter å sette opp lokale forhåndsvisninger, men en av de enkleste måtene er å bare operere direkte via Atom-kode redaktøren, ved å utnytte sin ypperlige økosystem for utvidelsespakker. Alt du trenger å gjøre er å installere din foretrukne pakke, aktiver den, og du er klar til å gå.
I dette raske tipset vil jeg vise deg tre av de beste Atom-pakkene for raskt og enkelt å konfigurere live reloading lokale forhåndsvisninger. La oss begynne!
Merk: Hvis du ikke har Atom ennå, kan du hente den fra https://atom.io/
De atom-live-server pakken er min personlige "gå til" når jeg trenger en rask og enkel måte å forhåndsvise noen statisk kode. Det spinner opp en lokal forhåndsvisning med en http: // protokoll og oppdateres automatisk når endringer i noen av filene som brukes i prosjektet ditt, blir lagret.
For å installere går det til Pakker> Innstillingsvisning> Installer pakker / temaer. Deretter søker du etter "atom-live-server" og treffer pakkens installasjon knapp når du finner den.
For å bruke pakken må du ha en prosjektmappe lagt til Prosjekt sidebar. Herfra går du til Pakker> atom-live-server> Start Server og en forhåndsvisning av nettstedet ditt åpnes i standard nettleseren din. Hvis du trenger å stoppe serveren igjen, gå til Pakker> atom-live-server> Stopp server.
Hvis du har flere prosjekter åpne i sidefeltet, avhenger av hvilken som helst på toppen, blir det forhåndsviset. Hvis du trenger å bytte fra forhåndsvisning av ett prosjekt til et annet, må du først stoppe serveren, dra og slipp prosjektet du vil forhåndsvise til toppen av sidepanelet, og start serveren på nytt..
I stedet for å åpne en forhåndsvisning i standard nettleseren din, vil atom-html-forhåndsvisning pakken gir deg en forhåndsvisning av en hvilken som helst HTML-side i Atom-editoren. For å installere denne pakken følger du de samme instruksjonene som vi gikk over for pakken ovenfor, men søk etter "atom-html-forhåndsvisning" i stedet.
Når du har installert, åpner du HTML-filen du vil forhåndsvise, og deretter går du til Pakker> Forhåndsvis HTML> Aktiver forhåndsvisning. Deretter ser du arbeidsområdet ditt, med koden din som vises i venstre rute og din forhåndsvisning i høyre rute.
Når du bruker atom-html-forhåndsvisning, filer trenger ikke å bli lagret for at forhåndsvisningen skal oppdateres. Snarere, når du skriver, vil forhåndsvisningen din bli oppdatert kontinuerlig.
De atom-browser pakken lar deg enkelt forhåndsvise HTML-en din i et nettleservindu innebygd i Atom, på samme måte som atom-html-forhåndsvisning. Dessverre er forhåndsvisninger via a fil:// protokoll, men det inkluderer live reload.
Den virkelige standout perk av denne pakken, men du kan bruke forhåndsvisningsvinduet som en vanlig nettleser. Dette gjør det veldig praktisk å slå opp dokumentasjonen mens du arbeider, eller for å følge en kodende opplæring for eksempel.
Installer pakken ved å følge trinnene som er beskrevet tidligere og søke etter atom-browser.
Etter installasjonen, åpne nettleseren for vanlig surfing ved å gå til Pakker> Atom Browser> Bytt.
For å forhåndsvise et HTML-dokument høyreklikk på det i Prosjekt sidebar og velg Atom Preview. For å aktivere live reload mens du kodes, klikk på det lille lynikonet ved siden av nettleserens URL-felt.
Det dekker tre super hendige live forhåndsvisningspakker for Atom. Med disse i verktøysettet din holder tappene på designene dine mens du går, være mye jevnere og enklere!
Har du andre forslag på raske og enkle måter å håndtere lokale forhåndsvisninger? Hvis ja, vennligst gå videre og del dem med andre Tuts + lesere i kommentarene nedenfor.
Accentsconagua