Minify automatico per i file CSS e Javascript usando Atom
da Massimo Della Rovere · pubblicato il 13 Giugno, 2017 · modificato il 18 Giugno, 2017

Molti programmatori dopo aver modificato un file CSS o Javascript si ritrovano con il problema di minificare il file prima di spedirlo al server di produzione. È vero che esistono tecniche per far fare questa operazione automaticamente dal server, però io preferisco non usare risorse di CPU su operazioni che si possono fare a priori. Esistono diversi tool in internet per eseguire questa operazione, però se le modifiche sono ripetitive si rischia di perdere molto tempo, per questo vi propongo questa soluzione.

Plugin atom-minify

Se usate l’editor Atom con questo plugin sono sicuro che vi troverete benissimo, in pratica una volta configurato vi scordate del problema. Una volta attivato basta continuare a lavorare e modificare il sorgente completo con le modifiche che vogliamo e ogni volta che salviamo il nostro lavoro in automatico viene creato il file .min, o in caso che volessimo qualcosa di diverso possiamo configurare un pattern per configurare la destinazione.

Per installare il plugin basta andare nelle preferenze e cercare un nuovo package con il nome di atom-minify, in realtà c’è ne sono diversi, questo è quello che mi ha convinto di più secondo le mie esigenze, ma non è detto che non trovate qualcosa di meglio. Questo package esegue il (min) sia di Javascript che di CSS in base all’estensione del file.

Configurazione di atom-minify

Ci sono due metodi per eseguire la funzione di minificazione, nel primo si lavora sul file originale e solo quando si lancia l’operazione manuale con l’opzione presente nel menu o con il comando da tastiera CTRL+SHIFT+M viene creato il file (min). Il secondo metodo, che è quello che preferisco, avviene tutto in automatico nel momento stesso che salvo il mio sorgente CSS o Javascript. Per configurare le opzioni basta andare su Setting.

Anche se la funzione da svolgere può sembrare molto semplice, in realtà esistono molti parametri di configurazione, come il metodo di elaborazione, la destinazione del file, il tipo di algoritmo utilizzato, le notifiche che si vogliono ricevere, etc etc.  In più è anche possibile scegliere se vogliamo elaborare solo CSS, solo JS o entrambi. Nella prossima schermata vi riporto il risultato ottenuto sui mie file CSS su cui sto lavorando.

Come potete vedere sulla sinistra ho due directory per i file CSS, una chiamata source e l’altra min, nella prima svolgo il mio lavoro di modifica mentre la seconda  si aggiorna automaticamente ogni volta che salvo il file su cui sto lavorando. Se poi aggiungete anche il package di SFTP potete automatizzare anche l’invio al vostro server e vi posso assicurare che dopo tante modifiche vi renderete conto di quanto tempo avete risparmiato.

1 Commento

  1. Ho installato il pacchetto è devo dire che è fantastico. Con un CTRL+S ti ritrovi già tutto pronto. La cosa che ho apprezzato è la possibilità di configurare la destinazione tramite delle variabili che ti permettono di generare il file esattamente dove ti serve.

condividi