Share
Quando lavori su un sito statico, la tua vita può essere resa molto più semplice se hai un modo semplice per attivare un'anteprima locale del tuo design.
Ciò che è ancora meglio è se questa anteprima locale ha una funzione di ricarica live in modo che le modifiche diventino automaticamente attive. E ancora meglio, se ti permette di visualizzare il tuo sito tramite a http: // protocollo, dato che a volte le cose non funzionano come previsto se visualizzate su a file:// protocollo.
Ci sono molti modi per configurare le anteprime locali, ma uno dei modi più semplici è quello di operare direttamente attraverso l'editor di codice Atom, sfruttando il suo eccellente ecosistema di pacchetti di estensione. Tutto quello che devi fare è installare il tuo pacchetto preferito, attivarlo e sei pronto per partire.
In questo rapido suggerimento ti mostrerò tre dei migliori pacchetti Atom per configurare in modo rapido e semplice il live ricaricamento delle anteprime locali. Cominciamo!
Nota: Se non hai ancora Atom, puoi recuperarlo da https://atom.io/
Il atomo-live-Server pacchetto è il mio personale "vai a" quando ho bisogno di un modo semplice e veloce per visualizzare in anteprima alcuni codici statici. Si gira su un'anteprima locale con un http: // protocollo e si aggiorna automaticamente quando vengono salvate le modifiche a uno qualsiasi dei file utilizzati nel progetto.
Per installarlo vai su Pacchetti> Vista impostazioni> Installa pacchetti / temi. Quindi cerca "atom-live-server" e fai clic su Installa del pacchetto pulsante quando lo trovi.
Per utilizzare il pacchetto è necessario aggiungere una cartella di progetto al Progetto barra laterale. Da qui vai a Pacchetti> atom-live-server> Avvia server e un'anteprima del tuo sito si aprirà nel tuo browser predefinito. Se è necessario interrompere nuovamente il server, andare a Pacchetti> atom-live-server> Arresta server.
Se nella barra laterale sono aperti più progetti, a seconda di quale si trova nella parte superiore, verrà visualizzato in anteprima. Se è necessario passare dall'anteprima di un progetto a un altro, prima arrestare il server, quindi trascinare e rilasciare il progetto che si desidera visualizzare in anteprima nella parte superiore della barra laterale e riavviare il server.
Piuttosto che aprire un'anteprima nel tuo browser predefinito, il atomo-html-anteprima pacchetto ti offre un'anteprima in linea di qualsiasi pagina HTML nell'editor di Atom. Per installare questo pacchetto segui le stesse istruzioni del pacchetto precedente, ma cerca "atom-html-preview" invece.
Una volta installato, apri il file HTML che desideri visualizzare in anteprima, quindi vai a Pacchetti> Anteprima HTML> Abilita anteprima. Vedrai quindi il tuo spazio di lavoro diviso, con il codice visualizzato nel riquadro di sinistra e la tua anteprima dal vivo nel riquadro di destra.
Quando si usa atomo-html-anteprima, i file non devono essere salvati per poter aggiornare l'anteprima. Piuttosto, mentre digiti la tua anteprima verrà aggiornata su base continuativa.
Il atomo di browser pacchetto ti permette di visualizzare facilmente il tuo codice HTML in una finestra del browser incorporata all'interno di Atom, in modo simile a atomo-html-anteprima. Purtroppo le anteprime sono via a file:// protocollo, ma include il live reload.
Il vero vantaggio di questo pacchetto, però, è che puoi utilizzare la finestra di anteprima inline come un normale browser. Questo rende molto comodo consultare la documentazione mentre lavori, o seguire un tutorial di codifica per esempio.
Installa il pacchetto seguendo i passaggi descritti in precedenza e cercando atomo di browser.
Dopo l'installazione, aprire il browser per la normale navigazione andando a Pacchetti> Browser Atom> Attiva / disattiva.
Per visualizzare l'anteprima di un documento HTML, fare clic con il tasto destro del mouse su di esso Progetto barra laterale e scegliere Anteprima Atom. Per abilitare la ricarica live mentre fai il codice fai clic sull'icona a forma di lampo accanto al campo URL del browser.
Copre tre pacchetti di anteprima dal vivo estremamente utili per Atom. Con questi nel tuo kit di strumenti, tenere le schede sui disegni mentre si va dovrebbe essere molto più agevole e facile!
Avete altri suggerimenti su come gestire in modo rapido e semplice le anteprime locali? Se è così, per favore vai avanti e condividili con altri lettori di Tuts + nei commenti qui sotto.
Accentsconagua