Přejít k navigační liště

Zdroják » JavaScript » Gulp vs. Grunt: souboj bez vítěze a poraženého

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

Články JavaScript

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:

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Milan Lempera

Díky za pěkné shrnutí a příklady.
Jen je potřeba doplnit, že velký počet pluginů gruntu není dán jeho velkým rozšířením, ale filozofií. Pro grunt musíš mít na všechno plugin, do konfigurace js kód nenapíšeš. Naopak filozofie gulpu je piš JS, nepiš plugin, když můžeš snadno použít nodejs modul. To ti dává výrazně větší flexibilitu.

Ve firmě jsme nejprve používaly grunt, ale pak jsme přešli na gulp, hlavně kvůli čitelnosti/srozumitelnosti. Nemusíš být js progamátor, abys pochopil co se v gulpfile děje. V případě gruntu pokud neznáš konkrétní plugin, moc toho z konfigurace nevyčteš. Takže pokud chcete taskrunner, ve kterém se vyzná každý člen vašeho týmu, je jednoznačným vítězem Gulp.

Pavel Lang

Souhlas s MilanLempera

Dle mého názoru je Gulp lepší právě v tom, že upřednostňuje kód před konfigurací.

Napsal jsem si také jeden nodejs projekt (sice to je čistě serverside věc bez nutnosti build nástroje — node-express-site-template), kde jsem preferoval nejprve JSON konfiguraci, ale ukázalo se to jako přítěž, tak jsem z toho udělal prostý javascript konfigurák.

Můj motiv byl, že konfigurák – pro někoho, kdo bude nasazovat nějaký derivát z toho skeletonu – by měl být prostě konfigurák.

U build nástroje bude konfigurák upravovat jen vývojář, který tomu stejně musí rozumět – tam je lepší dokumentovaný kód.

Jirka Kosek

Tak ještě by to chtělo porovnání s make a ant. Myslel jsem, že nový nástroj pro sestavování se stačí naučit jednou za deset let a ne každý rok. :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.