Share
Finora hai imparato come utilizzare la riga di comando per la gestione dei pacchetti di terze parti, potenziare il tuo codice di front-end, l'automazione con i responsabili delle attività, il caricamento in tempo reale e la sincronizzazione del browser.
In questo tutorial finale della serie imparerai come usare la riga di comando per far partire i tuoi progetti dall'inizio con l'impalcatura di nuovi progetti che hanno tutto il codice di terze parti di cui hanno bisogno, così come la gestione delle attività di Grunt o Gulp già configurata , in solo un attimo.
Ci sono oltre un migliaio di tipi diversi di progetti che puoi attualmente impalcare usando la riga di comando, ma in questo tutorial ne esamineremo quattro per progetti basati su:
Foundation ha una propria CLI (interfaccia a riga di comando) che è ottima per l'impalcatura dei progetti di framework Foundation. Esaminiamo come utilizzare la CLI di Foundation per creare un progetto utilizzando Compass.
La prima parte dell'impalcatura di un nuovo progetto della Fondazione consiste nell'installare la CLI richiesta. Prima di farlo, è necessario assicurarsi di avere cinque prerequisiti installati sul sistema:
Abbiamo coperto l'installazione di NodeJS, Git e Bower nei pacchetti di terze parti di Taming, l'installazione di Ruby è stata inclusa in Powering Up Front End Code e l'installazione di grunt-cli è stata coperta in Automation with Task Runners.
Dopo aver verificato l'installazione di Ruby, dovrai installare le gemme Compass e Bundler con questi comandi:
gemma installare bussola
gem installazione bundle
Ora puoi procedere e installare la Foundation CLI con questo comando:
gem installate foundation
Ora ogni volta che si desidera avviare un nuovo progetto Foundation, aprire un terminale in cui si desidera crearlo ed eseguire il comando
fondazione new nome_progetto
Vedrai quindi la tua nuova struttura della cartella del progetto generata, in questo modo:
Da qui, avrai bisogno di avere un terminale puntato all'interno della cartella del tuo progetto, ad es. all'interno di "nome_progetto".
La gemma "bundler" installata in precedenza verrà utilizzata qui per assicurarsi che tutte le librerie richieste siano state installate. Ottieni tutto al quadrato eseguendo il comando:
fascio
Devi farlo una volta sola quando crei per la prima volta i tuoi progetti Foundation Compass.
Nel browser, il tuo nuovo progetto sarà simile a questo:
Ora sei pronto per iniziare lo sviluppo sul tuo progetto. C'è un compilatore integrato di Sass che guarderà i file ".scss" nella libreria per le modifiche, quindi ricompilerli in css per te. Attivalo con il comando:
bundle exec orologio da bussola
Yeoman è uno strumento progettato espressamente per l'impalcatura di nuovi progetti. Funziona su NodeJS, integra Bower per la gestione dei pacchetti e utilizza Grunt o Gulp per l'esecuzione dell'attività.
Dopo aver installato Yeoman il processo di base per l'impalcatura, qualsiasi nuovo progetto diventa:
Accentsconagua
yo per generare un nuovo progetto, ad es. yo h5bp Maggiori informazioni su Yeoman su: http://yeoman.io/
Per usare Yeoman, devi avere bower, grunt-cli e gulp installati a livello globale, che dovresti avere a questo punto, purché tu abbia seguito tutti i tutorial della serie fino ad ora.
Installa Yeoman globalmente con il comando:
npm install -g yo
Ora sei pronto per andare a trovare generatori e impalcature nuovi progetti.
Per costruire un progetto Bootstrap utilizzeremo il generatore-gulp-bootstrap. Tra le altre cose, questo generatore ti imposta con il framework Bootstrap, jQuery e Modernizr, BrowserSync, compilazione automatica Sass tramite LibSass, linting automatico JS e ottimizzazione dell'immagine.
Installa il generatore globalmente con:
[sudo] npm install -g generator-gulp-bootstrap
Punta il tuo terminale ovunque tu voglia impalcatura del tuo nuovo progetto ed esegui:
yo gulp-bootstrap
Avrai un piccolo display come questo nel tuo terminale, e sarai in grado di verificare che vuoi usare Bootstrap e Modernizr:
Una volta terminato il processo, il generatore avrà una struttura di cartelle come questa:
Per costruire il tuo progetto usa il comando:
sorso
Per far ruotare un'anteprima locale con la compilazione automatica e l'esecuzione di ricarica:
gulp watch
In un browser, il tuo nuovo progetto Bootstrap sarà simile a questo:
Per costruire un nuovo progetto HTML5 Boilerplate utilizzeremo il generatore-h5bp.
Installa il generatore globalmente con:
[sudo] npm install generator-h5bp -g
Scappold il tuo nuovo progetto con questo comando:
yo h5bp
Avrai la possibilità di scegliere se vuoi o meno i documenti inclusi nel tuo progetto, quindi il generatore verrà eseguito.
Avrai quindi un nuovo progetto HTML5 Boilerplate strutturato in questo modo:
In un browser tutto ciò che vedrai è un semplice messaggio "Hello world!", Ma se visualizzi il codice vedrai che hai tutto ciò che ti serve per avviare il tuo sito HTML5:
Web Starter Kit è un progetto di Google, progettato come "boilerplate & tooling for multi-device development". Puoi leggere tutto sulle sue funzionalità su: https://developers.google.com/web/starter-kit/
Per impalcarlo useremo il generatore-mobile.
Installa il generatore globalmente con:
[sudo] npm installa yeoman / generator-mobile -g
Scappa il tuo progetto GWSK con il comando:
sei mobile
Nel tuo terminale risponderai a una serie di domande in base alle quali verrà generato il tuo progetto:
Quando il generatore ha terminato di funzionare, il tuo nuovo progetto avrà questa struttura:
Per aprire un'anteprima localhost powered di BrowserSync, esegui questo comando:
servire il gulp
L'anteprima del tuo sito sarà simile a questa:
Nota: Dopo aver eseguito il comando gulp serve potresti visualizzare un messaggio di errore che indica che non è stato possibile trovare la sincronizzazione del browser. Se è così, installalo manualmente nella tua cartella con questo comando:
[sudo] npm installa la sincronizzazione del browser
Per costruire l'intero progetto, esegui questo comando:
sorso
Per ottenere un feedback sulla velocità del tuo progetto, esegui:
gulp pagepeed
Questo comando ti darà una lettura dei dati di "velocità della pagina" nel tuo terminale in questo modo:
E se scegli una delle opzioni di hosting mentre impalcature il tuo progetto, pubblica il tuo sito con:
gulp deploy
Questo è tutto per questo tutorial: ora hai una serie di strumenti a portata di mano per essere subito operativo con alcuni framework front-end comuni, tutto attraverso la potenza della riga di comando!
