[Gruppo-web] Grunt e Valencia

Mattia Migliorini deshack a ubuntu.com
Lun 29 Set 2014 17:36:14 BST


Ciao a tutti,
oggi ho trovato il tempo di mettere un po' le mani su Valencia. Non ho
fatto molto, ma questo è quanto:

Ho aggiunto Grunt al tema. Grunt è un tool per l'automazione di task. Detto
in parole povere, non dovete più preoccuparvi di compilare i sorgenti SCSS
in CSS perché se ne occupa lui.
Quello che dovete fare voi è: installare il pacchetto nodejs per avere node
package manager (npm) con *sudo apt-get install nodejs*. Successivamente
installate la CLI di grunt globalmente con *sudo npm install -g grunt-cli*.
Poi, una volta clonato/aggiornato il repo di Valencia, installate grunt e
tutte le dipendenze all'interno del progetto con *npm install*.

I comandi disponibili sono (dovete essere nella root di Valencia):

   - *grunt* lancia il task di default, che corrisponde con il task watch.
   In pratica guarda il file Gruntfile.js e tutti i file .js presenti nella
   directory js/ e se ne vengono aggiunti o modificati li controlla per vedere
   se ci sono errori di sintassi (ad eccezione di core.js e yui-min.js che non
   abbiamo scritto noi ma generano tutta una serie di errori). Inoltre osserva
   la directory sass/. Quando viene aggiunto/modificato/rimosso un file,
   compila sass/style.scss in css/style.css in modo esteso e inserendo come
   commento nel css i numeri delle righe dei file SCSS a cui fanno riferimento
   le varie regole CSS. Va bene durante lo sviluppo, per la produzione è già
   pronto un altro task.
   - *grunt dist* lancia il task 'dist', quello pensato per la produzione.
   Fa un controllo dei file .js come il task di default (lo fa una volta sola,
   non resta in ascolto di ulteriori modifiche), poi compila sass/style.scss
   in css/style.min.css in forma compressa, quindi adatta per la produzione.
   - *grunt check *lancia il task 'check', che non fa altro che controllare
   i file .js come nel caso precedente e i file .scss in modo analogo, quindi
   fa un controllo della sintassi senza compilare. Anche in questo caso il
   controllo viene fatto una volta sola, non resta in ascolto di modifiche
   ulteriori.

Ovviamente per far sì che tutto funzioni dovete aver installato anche sass,
penso ci sia già illustrato da qualche altra parte come fare. In ogni caso
viene usata la gem di Ruby.

Oltre a questo ho fatto alcune modifiche ai sorgenti SCSS:

   - ho aggiunto un paio delle vecchie classi che usavamo di solito nella
   creazione delle pagine in sass/_classes.scss. Non sono tutte, perché la
   maggior parte erano legate ai panel e soprattutto sarebbero da rivedere
   nell'ottica del nuovo design (ho fatto qualche leggera modifica, ma non ho
   testato assolutamente niente);
   - ho creato alcune funzioni SASS, le trovate in sass/_functions.scss.
   Una (convert-to-rem()) non è da usare direttamente, ma viene chiamata da
   em-calc(), che permette di calcolare il valore in em di un dato valore in
   px. Leggete anche il commento nel codice per capire come usarla. L'altra è
   strip-unit(), che prende un valore e lo ritorna senza l'unità di misura.

Ho notato qualche refuso nel codice, in pratica venivano usate delle
variabili che usavano i vecchi nomi definiti nel framework di Canonical
(parole separate da _, mentre ora sono separate da -). Siccome non ho
testato niente, bisognerebbe dire al tema di usare il foglio di stile
css/style.css e controllare che tutto funzioni a dovere.

Ho anche aggiornato composer nel repo del sito (il phar, non le librerie
incluse).

Dovrebbe essere tutto, al più presto scrivo anche una paginetta nel wiki.

Baci.
-- 
Mattia Migliorini

Web Designer & Developer
Website: www.deshack.net
OpenPGP key: AA3B90BC
Fingerprint: 5F30 BEB3 224E A831 1DCE  F554 7E64 2AFF AA3B 90BC
-------------- parte successiva --------------
Un allegato HTML è stato rimosso...
URL: <http://liste.ubuntu-it.org/pipermail/gruppo-web/attachments/20140929/c4207e10/attachment.htm>


Maggiori informazioni sulla lista Gruppo-web