Contenuto
I task runner JavaScript come Grunt sono diventati estremamente popolari tra gli sviluppatori front-end. Questo perché aiutano a fare l'unica cosa che tutti noi vogliamo fare nel nostro lavoro: risparmiare tempo!
Ma con più di 5.000 (e oltre) plug-in Grunt ora disponibili, può essere difficile per gli sviluppatori trovare quei "diamanti allo stato grezzo". Abbiamo dato uno sguardo indietro al nostro tempo rimanendo bloccati in Grunt per trovare la ricetta perfetta dei plugin Grunt che dovresti usare.
01. Uglify
Ogni sviluppatore front-end degno di questo nome conosce i vantaggi della minimizzazione dei file JavaScript e questo è esattamente ciò che fa questo plug-in. Tale è la sua popolarità, in realtà è inclusa nella Guida introduttiva di Grunt. Nonostante il nome, questo plug-in può essere utilizzato anche per abbellire il tuo codice JavaScript, anche se non è particolarmente utile per l'uso in produzione.
02. Sass
Potrebbe esserci qualche dibattito su quale pre-processore CSS governa davvero il posatoio, ma qui a Stickyeyes, abbiamo optato per Sass piuttosto che per il suo principale rivale, Less. Questo plug-in ci consente di scrivere i nostri file Sass e di compilarli automaticamente in CSS. I pregi dell'utilizzo di un pre-processore CSS garantiscono un articolo separato in sé, ma è sicuro dire che se non ne stai già usando uno, sei molto in ritardo alla festa!
03. CSSMin
Questo plugin è l'equivalente CSS di Uglify. Ottiene semplicemente i file CSS specificati e li minimizza. Ovviamente, se intendi usarlo insieme al plug-in Sass, devi assicurarti che questa attività venga eseguita dopo l'attività Sass.
Esistono molte alternative a CSSMin che possono anche ridurre le dimensioni dei file CSS utilizzando tecniche leggermente diverse; CSS nano, CSS wring, CSS shrink, ecc. Leggi questo pratico benchmark se ti piacciono queste cose.
04. Concat
Come suggerisce il nome, questo plugin prende semplicemente più file e li concatena in uno solo. Come per la minimizzazione del codice, anche la concatenazione dei file è una vecchia best practice per ridurre i tempi di caricamento delle pagine.
La concatenazione di file dovrebbe sempre essere utilizzata nella produzione sia per JavaScript che per CSS. Questa è comunemente l'ultima attività da eseguire, dopo l'attività di pre-elaborazione CSS e l'attività di minimizzazione. È facile dire a questo plugin di concatenare tutti i file in una directory specifica, ma attenzione all'ordine in cui i file verranno concatenati: potrebbe essere necessario dare un ordine specifico o nominare i file in modo che siano sempre concatenati nell'ordine desiderato .
05. ImageMin
Allo stesso modo di CSSMin e Uglify, ImageMin affronta un altro vecchio problema per il caricamento della pagina: la dimensione del file immagine. La "minimizzazione" dell'immagine è solitamente un primo punto di riferimento per l'ottimizzazione, quindi questo plug-in è essenziale per ridurre il più possibile la dimensione totale del file di pagina.
Se stai lavorando con JPG, PNG, GIF o SVG (un formato di immagine vettoriale sempre più popolare), questo plug-in fornirà riduzioni senza perdite delle dimensioni del file delle tue immagini, senza che tu debba alzare un dito. Se hai molte immagini nel tuo progetto, è una buona idea eseguire questa attività solo quando stai spingendo alla produzione, piuttosto che eseguire questa attività su un evento di controllo (vedi punto successivo).
06. Guarda
Questo plugin in realtà non influisce sul front-end del tuo sito web, ma è estremamente utile per creare un processo Grunt efficiente. Watch tiene semplicemente d'occhio tutte le directory specificate e, una volta che qualcosa cambia, attiverà automaticamente alcune attività Grunt.
Quindi puoi impostare una condizione di controllo sulla directory "js" per eseguire le attività JavaScript e un'altra sulla directory "css" per eseguire le attività CSS. Ciò significa che non dovrai mai eseguire manualmente il tuo processo Grunt principale! Basta inizializzare l'attività di guardia grugnita prima di iniziare a fare modifiche e puoi dimenticarti che è anche lì.
Parole: Jamie Shields
Jamie Shields è uno sviluppatore back-end presso l'agenzia di marketing digitale Stickyeyes.
Come questo? Leggi questo!
- Grunt vs Gulp: quale strumento di compilazione JavaScript dovresti scegliere?
- 8 modi per migliorare la tua configurazione Grunt
- I migliori temi WordPress gratuiti
