The Battle Of Build Scripts: Gulp Vs Grunt

Ho già scritto su come iniziare con Gulp e su come iniziare con Grunt. Entrambi automatizzano i nostri compiti, entrambi utilizzano il nodo e richiedono entrambi di creare attività e installare plugin di qualche tipo. Ma ti chiedi della differenza tra i due, o anche, che è meglio?

In questo articolo mi concentrerò principalmente sulle differenze tra questi due progetti, che possono essere utili per aiutarvi a decidere quale dei due si potrebbe ritenere migliore per se stessi. Userò del codice che potrebbe non essere familiare. Se lo è, suggerisco di leggere i due articoli precedentemente pubblicati prima di iniziare.

Altro su Hongkiat.com

• Come iniziare con Gulp
• Come iniziare con Grunt

Velocità

La principale differenza tra Gulp e Grunt sta nel modo in cui gestiscono i loro compiti di automazione all'interno . Gulp utilizza gli stream dei nodi mentre Grunt usa i file temporanei. Mettiamolo in chiaro inglese, vero?

Supponi di voler scrivere il codice SASS per il tuo progetto. Vorresti compilare il tuo codice SASS e quindi forse ridurlo.

Grunt gestisce questo usando file intermedi che sono operazioni di I / O su disco. Il tuo file SASS è compilato e quindi scritto in un file temporaneo. Il file temporaneo viene utilizzato dal prefisso autofilm e quindi il prodotto finale viene scritto nel file di destinazione.

Gulp si prende cura di tutto questo in-memory . Il tuo file SASS sorgente viene compilato, il risultato viene passato al prefisso-autoprefixer senza essere scritto su un file e il file di destinazione viene quindi scritto.

Rispetto alle operazioni in memoria, le scritture su disco sono lente, il che significa che Gulp ha un grande vantaggio in termini di velocità (per ora). Un confronto di velocità è stato fatto da tech.tmw che mostra che la maggior parte delle attività sono almeno due volte più veloci su Gulp. Anche se questo non è stato uno studio estremamente scientifico, la tendenza è lì e ho visto lo stesso con i miei progetti. Ma quanto è grande l'impatto della differenza di velocità?

Differenza in secondi

Per la maggior parte dei progetti questo non importa. La maggior parte dei progetti sono piccoli . Quando crei un tema WordPress o qualcosa di simile, il numero di file con cui devi lavorare è entro un limite ragionevole. Non importa se i tuoi fogli di stile sono compilati in 400ms o 800ms.

Inoltre, la maggior parte dei progetti può essere strutturata in modo tale che alcuni dei problemi più intensi possano essere aggirati . Se hai 50 file SASS puoi concatenarli altrettanto rapidamente mentre sono in sviluppo, non ci sarà bisogno di autoprefix o di minimizzarli. Non è necessario ottimizzare le immagini ogni volta che si salva un progetto e così via.

Anche quando hai davvero bisogno delle armi grandi perché stai spingendo il tuo lavoro su un server di staging o quando stai aggiornando un repository, un tempo costruito di 5 secondi o 9 secondi fa molta differenza?

Per completare il tutto, Grunt aggiungerà il supporto per il piping nella prossima versione 0.5 che aumenterà considerevolmente le cose, rendendo questo un punto controverso.

La comunità

Grunt è stato molto più a lungo di Gulp quindi ha una base di utenti significativa. Grunt riceve attualmente circa 37.000 download al giorno in media, Gulp ne guadagna un po 'più della metà, vicino ai 23.000. Detto questo, Gulp è stato in giro solo per un anno e mezzo, rendendo quel numero di tutto rispetto a dir poco.

Grunt ha attualmente oltre 4000 plugin mentre Gulp ha più di 1200 plugin. Secondo le tendenze di Google, sempre più persone cercano cose relative a Grunt, ci sono più forum che si occupano di esso e in genere un maggior sostegno da parte della comunità.

Ovviamente Gulp sta andando e sta arrivando, il che significa che probabilmente andrà a finire nel lungo periodo . Tuttavia, questo è un ostacolo per alcuni sviluppatori, specialmente quelli che lavorano su progetti basati su Grunt.

Vorrei sottolineare che le comunità per entrambi sono estremamente belle . Per quanto posso dire, la relazione tra i leader di ciascuna comunità è sorprendente e dovrebbe servire da esempio a tutti. Il creatore di Gulp ha effettivamente aiutato lo scrittore del confronto dei test di velocità a migliorare le precisioni temporali che portano a una diminuzione delle differenze di tempo. Questo è quello che chiamo un gentiluomo!

Configurazione del codice Vs

Apparentemente questo è il punto di svolta per molti, ma ad essere onesti, non riesco a vedere il problema qui personalmente.

L'argomento è simile al seguente: Gulp è un buon esempio del fatto che il codice sulla configurazione può essere una buona cosa quando la configurazione diventa un po 'confusa . Altre persone dicono che mentre questo è vero e Gulp è più facile da leggere, è più difficile da scrivere perché i piping possono essere un po 'confusi .

Prima di appesantire, ecco lo stesso esempio prima in Grunt, poi in Gulp:

 grunt.initConfig ({sass: {dist: {file: [{src: 'dev / *. scss', dest: '.tmp / styles', espandi: true, ext: '.css'}]}}, autoprefixer : {dist: {file: [{expand: true, cwd: '.tmp / styles', src: '{, * /} *. css', dest: 'css / styles'}]}}, guarda: { styles: {files: ['dev / *. scss'], tasks: ['sass: dist', 'autoprefixer: dist']}}}); grunt.registerTask ('default', ['styles', 'watch']); 

 gulp.task ('sass', function () {gulp.src ('dev / *. scss') .pipe (sass ()) .pipe (autoprefixer ()) .pipe (gulp.dest ('css / styles' ));}); gulp.task ('default', function () {gulp.run ('sass'); gulp.watch ('dev / *. scss', function () {gulp.run ('sass');});} ); 

La mia opinione è che non importa davvero. Certo, se sei abituato al primo modo potresti aver bisogno di passare un po 'di tempo a capire il secondo, ma questo è anche vero viceversa. Quindi per me, l'argomento "è confuso" è completamente invalido. Ogni nuovo metodo che apprendi all'inizio è confuso, ma se ti prendi il tempo per capire la logica di ognuno, tutto si uniforma.

Detto questo, personalmente preferisco l'API di Gulp perché è pulito e riflette il modo in cui penso più da vicino di Grunt. Questo è ovviamente completamente soggettivo e non è affatto un problema con Grunt, è solo una mia preferenza personale.

Come scegliere

Non penso ci sia alcuna domanda sul fatto che sia Grunt e Gulp siano grandi strumenti e hanno aiutato le persone a risparmiare innumerevoli ore di tempo nel corso degli anni. Grunt è un po 'più lento per ora, ma ha una comunità molto più grande. Gulp è più veloce, ha un'API più pulita, ma manca la base di utenti.

Penso che alla fine la decisione dipenderà dalla continuità, dai plugin disponibili e dalle preferenze .

(1) Se usi Grunt / Gulp da un po 'e ne sei felice, non c'è motivo di cambiare.

(2) Se il tuo progetto richiede plug-in non forniti da Gulp e non sei pronto a scriverne uno da solo, dovrai farlo con Grunt.

(3) Se le due considerazioni di cui sopra non si applicano a voi, arriverà alla preferenza. Suggerisco di provare entrambi e vedere quale si attacca con te .

Come ho detto, ho scelto di utilizzare Gulp perché mi piace la sua API più pulita, ma mi sento perfettamente a mio agio nell'utilizzare Grunt se un progetto lo richiede. Quello che non dovresti fare è leggere che Mr. Know-it-all ha detto che Gulp è migliore e lo accetta. Mentre ci sono differenze, non c'è un vincitore chiaro ed entrambi i progetti possono coesistere e coesisteranno . Provali e prendi una decisione.

Nota: potresti anche prendere in considerazione le opinioni di utenti come Keith Cirkel (un consulente Javascript) che ti consiglia di non usare nessuno dei due . Nella sua interessante Perchè dovremmo smettere di usare l'articolo di Grunt & Gulp, suggerisce di usare npm.

Ulteriori letture

Ci sono molti altri articoli eccellenti su questo argomento. Raccomanderei caldamente quanto segue per ulteriori letture; non fa mai male leggere ciò che gli altri hanno da dire!

• Grunt vs Gulp - Beyond the Numbers (ringraziamenti speciali per gli esempi chiari)
• Gulp, Grunt, Whatever
• Scegli: Grunt, Gulp o npm?
• Speedtesting Gulp and Grunt
• Perché dovremmo smettere di usare Grunt & Gulp
• Build Wars (usa le frecce per navigare)
• Non c'è bisogno di Grunt, prendi un Sorso d'Aria Fresca

Come disabilitare il rilevamento della posizione e le notifiche del desktop dai siti Web

Molti siti Web richiedono la posizione per offrire servizi migliori o richiedere di mostrare le notifiche del desktop per tenerti aggiornato. Queste istruzioni ti impediranno di navigare nel sito Web e non andranno via finché non premi il pulsante "Permetti" o "Nega" . Se sei stanco di vedere queste istruzioni, puoi facilmente disabilitarle nel tuo browser .

(Consigli tecnici e di design)

Trend fastidiosi del web design che dovresti evitare (o fare con moderazione)

Le persone amano seguire le tendenze . E non c'è niente di male in questo. In effetti, per essere "cool" seguire le tendenze è un must. Questo è molto importante per i web designer al fine di tenere il passo con la crescente concorrenza. Ma quando si tratta di seguire le tendenze, i web designer a volte tendono a pensare troppo o a trascurare alcuni dei dettagli più importanti, in particolare per l'usabilità.In q

(Consigli tecnici e di design)