Ambienti di Sviluppo Archives

Come integrare LESS in Sublime Text su Windows

Sulla stessa “onda” del precedente articolo Come installare CoffeeScript in Windows con Sublime Text, anche LESS, il metalinguaggio gerarchico nato per ampliare il modo di vedere e di lavorare con i CSS, trova sempre più spazio nei nuovi progetti web e la sua popolarità, contribuita certamente dalla comunità che sta attorno al progetto e dal contrasto con il concettualmente simile SASS (da cui è stato ispirato), è in crescente aumento, come dimostrano il numero di articoli, post, tweet & co. che ogni giorno colleziona. Ma come compilare il codce LESS in Windows? Una soluzione particolarmente semplice e funzionale, la da Sublime Text aiutato dal solito node.js. Ecco il piano:

1. Scaricare ed installare node.js;
2. Scrivere sul terminale/command prompt di node.js il comando:
npm install -g less
3. Aggiungere ai path assoluti (ecco una guida) il percorso:
C:\Program Files (x86)\nodejs\node_modules\
4. Scaricare ed installare il “Sublime Package Control” per Sublime Text (leggere questa pagina);
5. Scaricare la sintassi per LESS (CTRL+Shift+P, scrivere “install”, premere invio da tastiera, digitare less e installare il plugin per la sintassi di Danro);

6. Scaricare il pacchetto “LESS Builder” ( CTRL+Shift+P, scrivere “install”, premere invio da tastiera, digitare “LESS Builder” e quindi installare il plugin di Berfarah);
7. Aprire un file “*.less” oppure crearne uno contenente ad esempio il seguente codice:

.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

8. Selezionare “LESS” da “Tools” -> “Build Systems“;
9. Salvare il file con l’estensione “*.less“, quindi pigiare da tastiera la combinazione CTRL+B;
10. Dovremmo trovare nella stessa cartella in cui si trova il file “*.less” il file “*.css” compilato.

Finito! In caso di errori, consiglio di riavviare Sublime Text e assicurarsi di aver ben digitato il “PATH”, prestando attenzione ai “;” fra una istruzione e l’altra.

Come integrare Sass in Sublime Text su Windows

LESS o Sass? La scelta è ardua, in web le opinioni sono contrastanti e, sostanzialmente, anche se le differenze ci sono, questa dualità sembra più che altro una forte guerra di religione, in stile Torvalds-Tanenbaum sui kernel dei sistemi operativi. Ma se abbiamo già pubblicato una guida sul come installare LESS su Windows, con tanto di integrazione con Sublime Text 2, che ne è di Sass? Ecco quindi come installare Sass su Windows ed integrarlo su Sublime Text 2:

1. Installare Ruby scaricando l’installer da qui (mi raccomando, selezionare l’opzione che aggiunge ruby ai “PATH” di Windows, oppure aggiungerli manualmente);
2. Aprire una cartella qualunque, cliccare sulla barre degli indirizzi in alto e digitare il percorso “C:\Windows\System32“;
3. Trovare il file “cmd.exe“, cliccare su di esso con il tasto destro e scegliere “Esegui come amministratore” dal menù contestuale;
4. Localizzarsi con il comando “cd” sulla cartella “bin” contenuta all’interno della directory madre di Ruby (solitamente, il percorso è simile a “C:\Ruby193\bin“);
5. Digitare il comando “gem install sass” per installare Sass;
6. Digitare il comando “gem install compass” per installare Compass;

7. Scaricare ed installare il “Sublime Package Control” per Sublime Text (leggere questa pagina);
8. Scaricare la sintassi per Sass (CTRL+Shift+P, scrivere “install”, premere invio da tastiera, digitare scss e installare il plugin per la sintassi);

9. Creare all’interno della cartella “User” di Sublime Text (il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User”) una nuova cartella con nome “Sass” (o qualcosa di simile);

10. Scaricare i file per il “Build System” di Sublime Text da qui e copiare i file “Sass.sublime-build” e “Sass Minify.sublime-build” all’interno della cartella appena creata al passaggio #7;

11. Riavviare Sublime Text;

Finito! Adesso avremo due sistemi per compilare i file “*.scss“: con il sistema “Sass” il css prodotto avrà una forma estesa e leggibile, mentre con il “Sass Minify” il css sarà compresso per bene. Entrambi li troviamo in “Tools” -> “Build Systems.

Come installare ed usare YUI Compressor in Sublime Text su Windows

Anche se non aggiornato da qualche tempo, YUI Compressor rimane uno strumento molto utile per comprimere in maniera efficace e rapida il nostro codice JavaScript o CSS. Usando poi la versione scritta in Java, è possibile integrarlo in pochi passaggi con il noto editor di sviluppo Sublime Text 2. Ecco come installare YUI Compressor in Sublime Text:

1. Scaricare ed installare il “Sublime Package Control” (leggere questa pagina); 2. Creare all’interno della cartella “User” di Sublime Text (in Windows, il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User“) una nuova cartella con nome “YUI Compressor“;
3. Scaricare da qui l’ultima versione disponibile di YUI Compressor, decomprimere il pacchetto e quindi aprire la cartella “Build” al suo interno;
4. Spostare/copiare il file “*.jar” appena scaricato nella cartella creata al passaggio #2;
5. Aprire Sublime Text e apre il menù “Tools” -> “Build System…” -> “New Build Systems…“;
6. Aggiungere il codice riportato di seguito:

{
“cmd”: [“java”, “-jar”, “${packages}\\User\\YUI Compressor\\yuicompressor-2.4.8pre.jar”, “$file”, “-o”, “${file_base_name}.min.${file_extension}”, “–charset”, “utf-8”],
“selector”: “source.js”
}

7. Salvare il file come “YUI Compressor.sublime-build” (mi raccomando, specificare il formato per evitare di incorrere in problemi);
8. Riavviare Sublime Text;
9. Aprire un file CSS o JavaScript, selezionare “YUI Compressor” da “Tools” -> “Build Systems“;
10 Pigiare da tastiera la combinazione “CTRL+B” e appare la console di Sublime Text, con il risultato della compressione.

Et voilà! Il gioco è fatto. Nella medesima directory in cui si trovava il file CSS o Javascript troveremo la sua versione “minimizzata“ e ribattezzata per l’occasione “nome_file.min.formato“.

Come integrare Google Closure in Sublime Text su Windows

Uno dei “JavaScript optimizer” più utilizzati ultimamente da noi web developer è certamente Google Closure. Un po’ perché prima della parola “Closure” c’è “Google“, un po’ tanto perché fa il suo lavoro davvero bene, evidenziando persino problemi di sintassi grazie al suo essere anche un linter. Ma come integrarlo in Sublime Text installato in ambiente Windows? Poiché Google Closure è scritto in Java, basta creare il nostro “Build System“. Ecco come:

1. Scaricare ed installare Java JRE;

2. Scaricare Google Closure ed estrarre dal pacchetto compresso il file “*.jar”;

3. Creare all’interno della cartella “User” di Sublime Text (il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User”) una nuova cartella con nome “Google Closure”;

4. Copiare/Spostare il file “*.jar” scaricato al passagio #2 all’interno della cartella appena creata al passaggio #3;

5. Scaricare i file per il “Build System” di Sublime Text da qui, dunque copiare il file “Google Closure.sublime-build” all’interno della cartella “User” di Sublime Text;

6. Riavviare Sublime Text;

7. Selezionare “Google Closure” da “Tools” -> “Build Systems“;
8. Creare o aprire codice JavaScript e salvarlo con il formato “*.js“, quindi pigiare da tastiera la combinazione CTRL+B;
9. Dovremmo trovare nella stessa cartella in cui si trova il file “*.js” un altro “*.js” compresso per bene.

10. Finito!

In caso di errori o se non troviamo nulla, verificare di aver salvato il file o di averlo scritto correttamente.

Come rimuovere o disabilitare i plugin su Eclipse

Come è facile installarli, è molto semplice rimuovere un plugin su Eclipse.

Nelle più recenti versione del noto ambiente di sviluppo, per rimuovere definitivamente un plugin, basta:

Continua a leggere Come rimuovere o disabilitare i plugin su Eclipse