Gulp vs. Grunt: souboj bez vítěze a poraženého

vs

Gulp a Grunt jsou nástroje stejného zaměření. Jejich cílem je usnadnit proces sestavení aplikace (tzv. buildovací nástroje). Jaké jsou rozdíly? Jak jsou na tom s výkonem? Proč se vám možná nakonec bude víc líbit Gulp.

Co mají společného?

Gulp i Grunt toho mají společného hodně:

  • Jsou napsány v Javasciptu – pro svůj běh vyžadují nodejs.
  • Ovládají se prostřednictvím příkazové řádky.
  • Mají velmi aktivní komunitu (např. one man army Sindre Sorhus).
  • Každý trochu jiným způsobem řeší identickou oblast vývojářského života.
  • Oba jsou opensource pod licencí MIT.

Grunt

Pravděpodobně jste o něm již slyšeli, vznikl totiž už v roce 2012. Jeho autorem je Ben Alman. Grunt upřednostňuje psaní konfigurace před psaním kódu. Pořádný Javascript najdete obvykle až v pluginech. Krátká ukázka toho, jak vypadá soubor Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
    something: {
     files: {
       'dest/output.min.js': ['src/input1.js', 'src/input2.js']
     }
    }
   }
  });

  // načteme externí modul
  grunt.loadNpmTasks('grunt-contrib-uglify'

  // přidáme úlohu
 grunt.registerTask('stable-build', ['...', '...']);
};

V tomto příkladu jsem použil Javascript, ale konfigurační soubor je možné psát také v Coffeescriptu, což jej značně zpřehlední.

Instalace Grunt

Grunt nainstalujete pomocí balíčkovacího nástoje npm. Příkazem npm install -g grunt-cli nainstalujete globální obálku, která bude následně spouštět lokální kopie Guntu. V domovském adresáři aplikace pak bude potřeba pustit: npm install grunt --save-dev.

Co vám může na Grunt vadit

  • Konfigurace místo psaní Javascript kódu.
  • Velké množství parametrů pro konfiguraci jednotlivých pluginů.
  • Ukecaný kód – konfigurační soubory Grunt jsou zpravidla delší.
  • Je pomalejší při zpracování většího počtu souboru (časté I/O operace mu berou dech).
  • Konkurenční zpracování úloh se řeší složitěji nebo prostřednictvím pluginu.

Gulp

Gulp vznikal v polovině roku 2013 pod hlavičkou společnosti Fractal. Jeho autorem je Eric Schoffstall. Jeho cílem je vše zjednodušit a zrychlit. Gulp masivně využívá nodejs streamy. Data se mezi jednotlivými úlohami předávají prostřednictvím pipeline. Redukuje se tím počet I/O diskových operací a úlohy se dají snadno řetězit.

Krátký příklad, jak může vypadat Gulpfile.js:

var gulp = require('gulp'),
var uglify = require('gulp-uglify');

gulp.task('compress', function() {
  gulp.src(['lib/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});

gulp.task('default', function() {
  gulp.run('compress');
});

Zde je krásně vidět základní myšlenka Gulp: Stručný a přehledný kód má přednost před konfigurací.

Instalace Gulp

Gulp nainstalujete v domovském adresáři aplikace pomocí příkazu: npm install gulp --save-dev.

Co vám může na Gulp vadit

  • Streamy. Pokud s nodejs začínáte, můžete se v nich lehce ztratit.
  • Složitý postup pří řešení lineární závislostí jednotlivých úloh.
  • Obvykle minimální možnosti konfigurace pluginu.
  • Menší množství pluginů.

Jdeme srovnávat!

Úvodem srovnání malá tabulka vybraných parametrů:

Parametr Gulp Grunt
Logo  gulp  grunt-logo
Web http://gulpjs.com/ http://gruntjs.com/
Rok vzniku 2013 2012
Počet pluginů 737 3,416
Stažení za měsíc 230 397 700 301
Počet kontributorů 86 48
Paralelizace úloh ano kódpluginPint
Sekvenční řetězení úloh kódpluginplugin ano
License MIT MIT

Dlouho jsem si lámal hlavu, jak tyto nástroje efektivně srovnat. Nakonec jsem zvolil několik jednoduchých příkladů, které jsem implementoval v obou nástrojích. Zrojové kódy testů naleznete zde: https://github.com/zdrojak/gulpvsgrunt.

Při testování jsem se zajímal pouze o celkový čas běhu. Každou úlohu jsem spustil desetkrát, aby byl rozdíl lépe patrný:

Coffeescript test provádí kompilaci 156 coffee souborů, výsledkem je jeden minifikovaný javascript:

Coffeescript Gulp: 14.613068 seconds
Coffeescript Gulp multiple task: 53.036898 seconds
Coffeescript Grunt: 69.4299 seconds

Javascript test provádí concat malého počtu Javascript souborů a jejich následnou minifikaci:

Javascript Gulp: 13.327634 seconds
Javascript Grunt: 12.729964 seconds

Less test provede kompilaci jednoho Less souboru:

Less Gulp: 13.058889 seconds
Less Grunt: 13.059217 seconds

Uvedené výsledky není možné zcela jednoznačně interpretovat, navíc mohou být ovlivněny kvalitou použitých pluginů. Každý z nástrojů má své slabé a silné stránky. Obecně je možné říct, že Gulp vyhrává, pokud zpracováváte větší množství souborů.

Nový verze Grunt 0.5.x by měla přinést výraznější zrychlení. Počítá se totiž také s možnosti předávat data mezi jednotlivými úlohami přostřednictvím pipeline.

Závěrem

Až vás bude někdo přemlouvat, že je jeden lepší než druhý, že musíte okamžitě přejít, jinak budete úplně out, můžete jej vesele ignorovat. Dle mého názoru je to čistě otázka subjektivních preferencí každého vývojáře. Zvolte si prostě filozofii, která vám vyhovuje (BroccoliMimosaBrunchCakeJake nebo shell) – hlavně nic nedělejte ručně a dvakrát, zejména pokud jde o build aplikace.

Jak přejít na Gulp?

Existuje skvělý plugin gulp-grunt, díky kterému budete moci spouštět Grunt úlohy pomocí Gulp. Hotovo! Tak a teď vážně. Přechod na Gulp samozřejmě znamená vše přepsat. Takže než začnete cokoliv přepisovat, zvažte, zda se vám investovaný čas vůbec vrátí:

  • Získáte kratší a přehlednější kód build skriptu.
  • Gulp se naučíte rychle – nového vývojáře zvládnete zaškolit do 20 minut.
  • Získáte jednoduché a přehledné API s minimem metod.
  • Čitelný Javascript místo konfigurace.
  • Paralelní zpracování úloh v základu.

Další materiály ke studiu:

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 3

Přehled komentářů

MilanLempera Gulp vs. Grunt
Pavel Lang Gulp je lepší
Jirka Kosek
Zdroj: https://www.zdrojak.cz/?p=13136