01.Bootstrap
Di seguito sono elencati tutti i software necessari per procedere con i LAB
Scarica ed installa l'ultima versione di nodejs dal sito http://nodejs.org/.
Il sito web intuisce il sistema operativo in uso.
Tutti i possibili download li puoi trovate direttamente su indirizzo: http://nodejs.org/download/.
Se usi linux (o virtual machine con linux) è possibile seguire questa utile guida: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
Seguire quindi tutti i passaggi per completare l'installazione.
Dopo aver installato nodejs avremo a disposizione il gestore dei pacchetti di nodejs. Verifichiamo il corretto funzionamento con il comando:
# npm --version
- For npm versions < 1.2.10.
- Il parametro -g installa il pacchetto a livello globale
il seguente comando installa Yeoman:
# npm install -g yo
per OSx,Ubuntu,etc. potrebbe essere necessario il comando
sudo
Stesso procedimento con Grunt e Bower
# npm install -g grunt grunt-cli bower
# npm install -g generator-h5bp
Ora abbiamo tutti gli strumenti necessari per inizializzare il progetto con il comando:
Creiamo una nuova cartella "codemotion"
# mkdir codemotion
Spostiamoci al suo interno e lanciamo il comando:
# yo h5bp
Il comando appena eseguito scarichera' all'interno della cartella codemotion un progetto vuoto (boilerplate) con tutte le risorse necessarie.
h5bp ci chiede se vogliamo includere la documentazione o meno, qualsiasi sia la tua scelta il risultato sarà molto simile a questo:
Analizziamo il contenuto del progetto con tutte le librerie scaricate.
Come si può notare aprendo i file css/html scaricati, il contenuto ha tutto il necessario per iniziare a lavorare i nostri file senza perdere tempo con le classiche impostazioni.
Abbiamo visto sopra quali sono gli strumenti per velocizzare la fase di start-up del progetto. Ora possiamo cancellare o rinominare la precedente cartella codemotion2014.
Per tutti i lab eseguiti durante il corso, è possibile utilizzare alcuni comandi git per clonare e spostarsi all'interno dei vari step previsti.
E' possibile clonare il progetto direttamente da questo indirizzo:
https://github.com/marcocasario/codemotion2014/tree/responsive-dev
Se non vuoi usare git puoi sempre scaricare il pacchetto aprendo la pagina del browser e cliccare su Download ZIP.
O tramite command line:
# git clone https://github.com/marcocasario/codemotion2014.git
Il comando eseguito crea una nuova cartella "codemotion2014", al suo interno ci saranno tutti i file del progetto.
A questo punto possiamo spostarci sul ramo che ci consentirà di lavorare sul secondo modulo.
Sempre da riga di comando, lancia il comando:
# git checkout responsive-dev
Branch responsive-dev set up to track remote branch responsive-dev from origin.
Switched to a new branch 'responsive-dev'
Apriamo la pagina index.html sul nostro browser, il risultato ottenuto deve essere questo:
