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
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ód, plugin, Pint
Sekvenční řetězení úloh	kód, plugin, plugin	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 (Broccoli, Mimosa, Brunch, Cake, Jake 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:

• Speedtesting Gulp and Grunt
• Grunt vs Gulp – Beyond the Numbers
• And just like that Grunt and RequireJS are out, it’s all about Gulp and Browserify now
• Grunt And Gulp Tasks For Performance Optimization
• Introducing Pint, the new build system for Grunt.js
• Gulp by example
• Stream Handbook
• Handling Sync Tasks with Gulp JS