<div dir="ltr"><div><div><div><div>Ciao a tutti,<br></div>oggi ho trovato il tempo di mettere un po&#39; le mani su Valencia. Non ho fatto molto, ma questo è quanto:<br><br></div><b></b></div>Ho aggiunto Grunt al tema. Grunt è un tool per l&#39;automazione di task. Detto in parole povere, non dovete più preoccuparvi di compilare i sorgenti SCSS in CSS perché se ne occupa lui.<br>Quello che dovete fare voi è: installare il pacchetto nodejs per avere node package manager (npm) con <i>sudo apt-get install nodejs</i>. Successivamente installate la CLI di grunt globalmente con <i>sudo npm install -g grunt-cli</i>.<br>Poi, una volta clonato/aggiornato il repo di Valencia, installate grunt e tutte le dipendenze all&#39;interno del progetto con <i>npm install</i>.<br><br></div>I comandi disponibili sono (dovete essere nella root di Valencia):<br><ul><li><b><i>grunt</i></b> 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.</li><li><i><b>grunt dist</b></i> lancia il task &#39;dist&#39;, 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.</li><li><i><b>grunt check</b> </i>lancia il task &#39;check&#39;, 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.</li></ul><p>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.</p><p>Oltre a questo ho fatto alcune modifiche ai sorgenti SCSS:</p><ul><li>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&#39;ottica del nuovo design (ho fatto qualche leggera modifica, ma non ho testato assolutamente niente);</li><li>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&#39;altra è strip-unit(), che prende un valore e lo ritorna senza l&#39;unità di misura.</li></ul><p>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.</p><p>Ho anche aggiornato composer nel repo del sito (il phar, non le librerie incluse).</p><p>Dovrebbe essere tutto, al più presto scrivo anche una paginetta nel wiki.</p><p>Baci.<br></p><div><div><div><div><div><div><div>-- <br><div dir="ltr"><div>Mattia Migliorini</div><div><br></div><div>Web Designer &amp; Developer<br></div><div>Website: <a href="http://www.deshack.net/" target="_blank">www.deshack.net</a></div><div>OpenPGP key: AA3B90BC</div><div>Fingerprint: 5F30 BEB3 224E A831 1DCE  F554 7E64 2AFF AA3B 90BC</div></div>
</div></div></div></div></div></div></div></div>