GULP

Hoe Gulp.js je workflow en siteprestaties verbetert

Bij Elephant zoeken we constant naar manieren om efficiënter te werken en onze workflow te verbeteren. Websites bouwen is in de basis grotendeels repetitief: bijna elke website heeft buttons, tabellen, een contactformulier, een navigatie enzovoort.

Zeker als je al wat langer websites ontwikkelt, begin je bepaalde patronen in dat bouwen te zien. Gulp helpt je daarin tijd te besparen en voorkomt dat je bij elke site alles volledig handmatig moet doen.

Een korte introductie

Gulp is van Amerikaanse makelij, gemaakt door een handjevol slimme developers bij We Are Fractal. Het borduurt voort op de begrippen van Grunt, dat op zijn beurt weer is ontstaan op basis van Node.js. Node.js is JavaScript (bekend terrein voor veel developers), maar dan voor op de server.

Het toffe aan Node is dat de community er enorm op is gesprongen en in 6 jaar tijd een framework heeft gebouwd waarmee je zo ongeveer alles kunt doen. Waaronder dus — onder de noemer lokale ‘build streaming’ — Gulp gebruiken.

De sleutelbegrippen van Gulp

Gulp is in essentie een simpel pakket, waardoor het makkelijk op te pakken is. In Gulp staan drie begrippen centraal: packages, tasks en watchers.

Packages

Omdat Node — en daarom dus ook Gulp — uit ‘packages’ bestaat, kunnen we gemakkelijk een verzameling samenstellen die precies doet wat we willen. Dit doen we in de terminal met het volgende commando:

npm-install

In een paar seconden is het geïnstalleerd en kun je starten.

Pakketten zijn er in alle soorten en maten. Van functionele pakketten (waar bijvoorbeeld front-end developers mee werken) tot zogenaamde ‘dependencies’: pakketten met functionaliteit waarop andere pakketten kunnen berusten.

Je stelt als het ware een web van allemaal modules samen en hebt zo de volledige controle over wat er gebeurt. Dat doen we met een Gulpfile: een projectbestand waarmee we Gulp vertellen welke pakketten ze allemaal moet laden.

Een paar pakketten die we bij Elephant dagelijks gebruiken:

gulp-sass

Bij vrijwel alle websites werkt Elephant met SASS — een zogenaamde CSS preprocessor — waarmee we extra handigheden en orde toevoegen aan onze CSS. Gulp-sass zorgt ervoor dat onze SASS-code wordt omgevormd naar (voor de browser bruikbare) CSS.

gulp-minify-css

De snelheid van websites wordt steeds belangrijker. Daarom is het voor webdevelopers zaak om ervoor te zorgen dat hun code zo optimaal en klein mogelijk bij de eindgebruiker terecht komt, zodat deze niet lang hoeft te wachten op het laden van de site. gulp-minify-css is het pakket dat we gebruiken om deze optimalisatie voor onze CSS-code uit te voeren.

gulp-uglify

gulp-uglify is het JavaScript-neefje van gulp-minify-css en zorgt eveneens voor het zo compact mogelijk maken van code. Ook dit helpt ons efficiënter werken en zorgt voor prestatiewinst van de website naar de eindgebruiker.

gulp-autoprefixer

Op het moment zijn er vier internetbrowsers waarvoor het raadzaam is te optimaliseren: Google Chrome, Mozilla Firefox, Apple Safari en Microsoft Internet Explorer. Deze hebben veelal hun eigen nuances binnen CSS en developers zijn erg veel tijd kwijt  met optimalisaties voor verouderde browserversies. Autoprefixer is een pakket dat dit probleem volledig automatiseert; je kunt precies aangeven welke versies van welke browsers je wilt ondersteunen en vervolgens verloopt de optimalisatie automatisch. Mijn persoonlijke favoriet!

lazypipe

Tenslotte gebruiken we lazypipe om ervoor te zorgen dat de verschillen tussen de front-end en back-end werkwijze zo min mogelijk frictie veroorzaken. En hoe minder frictie, hoe minder problemen je moet oplossen om die problemen weg te nemen. Mede dankzij lazypipe zijn de front-enders en back-enders bij Elephant (nog altijd) de allerbeste vrienden ;-).

Tasks

Stel, je verzamelt alle pakketten die je wilt gebruiken en je stopt deze bij elkaar in de Gulpfile. Alle informatie is dan aanwezig in de file, maar je hebt nog geen manier om de verzameling te vertellen wat het precies moet doen.

Dit is waar Tasks te hulp schiet. Met Tasks, ofwel ‘taken’, vertellen we Gulp wat het precies moet doen en met welke pakketten. Een typische taak ziet er zo uit:

gulp-task

We maken eerst een taak ‘build’ aan, specificeren vervolgens een bronbestand met ‘src’ (het globale SCSS-bestand) en gebruiken daarna een drietal ‘pipes‘ om bewerkingen te doen op dit bronbestand. Er is altijd maar één bronbestand, maar er zijn oneindig veel pipes te definiëren. Een pipe maakt gebruik van een van de vele pakketten die we eerder gesproken hebben.

Met taken kunnen we bronbestanden vervolgens tot in de puntjes bewerken. In de Elephant Gulpfile zit op dit moment bijvoorbeeld een taak die vier verschillende JavaScript-bestanden intelligent bij elkaar voegt tot één bestand. Daarna wordt dit ene bestand maximaal verkleind en weggeschreven naar een doelgerichte map. Het resultaat: efficiëntere, snellere code die ervoor zorgt dat websites/applicaties soepeler werken.

Watchers

Tenslotte bevat menig Gulpfile zogenaamde watchers: een concept waarmee Gulp in de derde versnelling gaat. Een watcher ‘kijkt’ naar een bestand of reeks bestanden, merkt op wanneer er zich wijzigingen voordoen en laat zo nodig van zich horen.

Hoe de watcher zich bij jou meldt, kun je zelf definiëren met een actie. Dat is bijvoorbeeld een notificatie als “Hoi Jochem, dit bestand is aangepast” of de uitvoer van een task. Dankzij de task-koppeling kunnen we de volgende workflow met onze CSS-code realiseren:

workflow

Device-onafhankelijk

In een fractie van een seconde zet Gulp al een nieuwe versie voor je klaar in de browser. Nog mooier: deze werkwijze is niet per definitie gebonden aan de computer waarop je aan het werk bent. Werken we bij Elephant bijvoorbeeld aan een responsive website, dan hebben we het project vaak open op een smartphone. Zo kunnen we direct zien welke wijzigingen we doorvoeren. Precies dezelfde werkwijze, maar een ander apparaat.

Gulp heeft de productiviteit van Elephant enorm verhoogd en het resultaat voor de eindgebruiker verbeterd. We kunnen niet wachten om te zien welke nieuwe technieken we hieraan kunnen toevoegen om het pakket nog nuttiger en completer te maken – ontwikkelingen volgen we uiteraard op de voet.

Heb je vragen, tips, feedback, suggesties en/of interesse in een Gulp-demonstratie op de werkvloer? Ik ben @jochemkeller op Twitter en zie graag je mentions tegemoet!