Share
När du arbetar på en statisk plats kan ditt liv göras mycket lättare om du har ett enkelt sätt att aktivera en lokal förhandsgranskning av din design.
Vad som är ännu bättre är om den här lokala förhandsgranskningen har en live reload-funktion så att du automatiskt ser dina ändringar träder i kraft när du arbetar. Och ännu bättre än, om det låter dig se din webbplats via en http: // protokoll, med tanke på att saker ibland inte fungerar som förväntat när de ses över en fil:// protokoll.
Det finns flera sätt att installera lokala förhandsgranskningar, men ett av de enklaste sätten är att bara driva direkt genom Atom-kodredigeraren, dra nytta av dess utmärkta ekosystem för förlängningspaket. Allt du behöver göra är att installera ditt föredragna paket, aktivera det och du är redo att gå.
I det här snabba tipset visar jag dig tre av de bästa Atom-paketen för att snabbt och enkelt kunna konfigurera lokala reläer för lokala förhandsvisningar. Låt oss börja!
Notera: Om du inte har Atom än, kan du ta den från https://atom.io/
De atom-live-server paketet är min personliga "gå till" när jag behöver ett snabbt och enkelt sätt att förhandsgranska någon statisk kod. Det spinner upp en lokal förhandsgranskning med en http: // protokollet och uppdateras automatiskt när ändringar i någon av de filer som används i ditt projekt sparas.
För att installera går det till Paket> Inställningar Visa> Installera paket / Teman. Sök sedan efter "atom-live-server" och tryck på paketets Installera knapp när du hittar den.
För att kunna använda paketet måste du ha en projektmapp som läggs till i Projekt sidofältet. Härifrån går du till Paket> atom-live-server> Start Server och en förhandsvisning av din webbplats öppnas i din standardwebbläsare. Om du behöver stoppa servern igen, gå till Paket> atom-live-server> Stoppa server.
Om du har flera projekt öppna i sidofältet, vilken som är överst kommer att bli förhandsgranskad. Om du behöver byta från att förhandsgranska ett projekt till ett annat, stoppa du först servern och dra och släpp det projekt du vill förhandsgranska till toppen av sidofältet och starta om servern.
I stället för att öppna en förhandsgranskning i din standardwebbläsare, atom-html-preview paketet ger dig en inline-förhandsvisning av vilken HTML-sida som helst i Atom-editoren. För att installera det här paketet följ samma anvisningar som vi gick över för paketet ovan, men sök efter "atom-html-preview" istället.
När du har installerat öppnar du den HTML-fil du vill förhandsgranska, och sedan gå till Paket> Förhandsgranska HTML> Aktivera förhandsvisning. Därefter ser du ditt arbetsutrymme, med din kod som visas i den vänstra rutan och din levande förhandsgranskning i den högra rutan.
När man använder atom-html-preview, filer behöver inte sparas för att förhandsgranskningen ska uppdateras. Snarare, när du skriver, kommer din förhandsgranskning att uppdateras löpande.
De atom-browser paketet kan du enkelt förhandsgranska din HTML i ett webbläsarfönster som är inbäddat i Atom, på samma sätt som atom-html-preview. Tyvärr är förhandsvisningar via a fil:// protokoll, men det inkluderar live reload.
Den verkliga standout-gränsen för det här paketet är dock att du kan använda inline-förhandsgranskningsfönstret som en vanlig webbläsare. Det gör det väldigt bekvämt att slå upp dokumentationen när du arbetar, eller att följa en kodningstutorial för exempel.
Installera paketet genom att följa stegen som beskrivits tidigare och söka efter atom-browser.
Efter installationen, öppna webbläsaren för vanlig surfning genom att gå till Paket> Atom Browser> Växla.
För att förhandsgranska ett HTML-dokument högerklicka på det i Projekt sidobar och välj Atom Preview. För att aktivera live reload när du kodar klickar du på den lilla blixtikonen bredvid webbläsarens URL-fält.
Det täcker tre super handiga live förhandsgranskningspaket för Atom. Med dessa i din verktygssats som håller flikar på dina mönster som du ska borde vara mycket jämnare och enklare!
Har du några andra förslag på snabba och enkla sätt att hantera lokala förhandsvisningar? Om så är fallet, fortsätt och dela dem med andra Tuts + -läsare i kommentarerna nedan.
Accentsconagua