Digital Customer Experience Blog

Digital Customer Experience Blog

Meningen op deze blog weerspiegelen de opvattingen van de schrijver en niet per definitie die van de Capgemini Group

Omarm het gemak van een taskrunner

Als front-end developer ben je naast puur programmeren ook vaak bezig met ‘nazorg’ taken. Denk bijvoorbeeld aan het minificeren van bestanden, netjes structureren van je code of het reviewen van je eigen code dan wel van een ander. Zou het niet ideaal zijn als dit grotendeels allemaal automatisch gedaan kon worden? Nu ben ik niet de eerste met dit idee en zijn er, gelukkig voor ons developers, knappe koppen aan de slag gegaan om dit te realiseren. Deze blog zal een korte introductie zijn over het resultaat daar van, namelijk taskrunners.

De populariteit van taskrunners groeit in de wereld van front-end development in toenemende mate. Deze taskrunners zijn veelal op JavaScript gebaseerde interfaces die een developer de mogelijkheid geven om diverse plugins, zoals pijpsegmenten, samen te voegen om vervolgens code geautomatiseerd door de gehele pijplijn heen te kunnen leiden. Bekende voorbeelden van dit soort taskrunners zijn Grunt1, Gulp2 en Broccoli3.

Deze plugins die de taskrunners ontsluiten, zijn vaak afgeleiden van bijvoorbeeld programmeer applicatie plugins of stand-alone automatisatie programmatuur die voorheen werd aangeboden op het internet. Voor het tijdperk van de taskrunner was het voor developers vaak een heel karwei om hetzelfde resultaat te verkrijgen. Zo moest elk van deze plugins apart worden geactiveerd vanuit de werkomgeving, of in uiterste gevallen moest een developer zelfs naar een bepaalde website die een vergelijkbare dienst aanbood om daar broncode aan te leveren. Daarna kreeg de gebruiker het verwerkte resultaat terug waarna het ook weer terug moest worden gekopieerd naar het project4. Taskrunners zorgen er voor dat dit nu allemaal geautomatiseerd uitgevoerd kan worden, binnen een eigen omgeving. De kracht van taskrunners zit hem daarom vooral in het ‘chainen’ van deze verschillende plugins op een centrale plek om zo het oorspronkelijke proces te versnellen.

Logo’s van de eerdergenoemde taskrunners Grunt, Gulp en Broccoli.

Veel van deze plugins zijn via de package manager van Node.js (Kortweg NPM5, hier zal ik in een volgend artikel dieper op in gaan) te installeren. Er zijn veel verschillende type plugins die allemaal grof zijn in te delen in bepaalde categorieën. Hier onder een overzicht van veel gebruikte plugins met daarbij een korte uitleg.

Linting and style checking – Code analyseren op potentiële bugs en conventies zoals de indentatie en notatie. Eigenlijk zijn deze plugins te vinden voor praktisch elke taal, waarbij ook configuratie bestanden kunnen worden gekoppeld om extra strikt of juist helemaal niet op bepaalde regels te linten/style te checken.

  • JSLint – Linter voor JavaScript
  • ESLint – Linter voor JavaScript met meer configuratie mogelijkheden
  • JSCS – Codestyle checker voor JavaScript
  • CSSLint – Linter voor CSS
  • HTMLLint – Linter voor HTML
  • CSSComb – Voor het herstructureren van CSS


Compiling – Het compileren van type bestanden

  • Contrib-less – Compileert LESS bestanden naar CSS
  • Contrib-sass – Compileert Sass bestanden naar CSS
  • Contrib-coffee – Compileert CoffeeScript naar JavaScript
  • Contrib-jade – Compileert Jade templates


Merging and minification – Het samenvoegen van verschillende bestanden

  • Concat – Standaard concatenatie van gekozen bestanden
  • Merge-JSON – Voor het mergen van meerdere JSON bestanden
  • SVGstore – Voor het mergen van SVG bestanden
  • CSSmin – Voor het minificeren van CSS
  • Uglify – Voor het minificeren van JavaScript


Overige handige plugins

  • Timer – Geeft extra inzicht in de tijd die het uitvoeren van taken kost
  • Watch – Taken initiëren als reactie op zojuist gewijzigde bestanden
  • LiveReload – Herlaad een pagina zo gauw een bestand is gewijzigd


Uiteraard zijn er nog veel meer plugins voor alle type taskrunners, zie daarvoor de specifieke plugin libraries van de desbetreffende taskrunner.

Dit soort plugins vormen vaak gezamenlijk een pijplijn. Deze pijplijn moet vooraf wel gedefinieerd worden, zodat duidelijk is voor de taskrunner wat voor plugins elkaar opvolgen en welke bestanden door de molen gehaald moeten worden. Het definiëren van deze plugins en de totale pijplijn gebeurt in een los JavaScript bestand. Afhankelijk van de gekozen taskrunner verschilt de naam van dit bestand (voor de eerder genoemde taskrunners is dat respectievelijk gruntfile.js, gulpfile.js en brocfile.js). Ook is het mogelijk om meerdere pijplijnen op te zetten met allemaal hun eigen functie, bijvoorbeeld een die puur plugins activeert die controleren of de code kwaliteit volstaat of juist een die alleen een bepaald type extensie herschrijft en controleert. Deze zijn dan ook los van elkaar te definiëren en individueel aan te roepen vanuit de command prompt.

De Grunt taskrunner in actie, de command prompt met daar in een uitgevoerde pijplijn van plugins.

De afbeelding hierboven laat zien hoe de command prompt een bepaalde keten doorloopt. Kort samengevat zien we dat de inhoud van een CSS bestand opnieuw wordt gesorteerd aan de hand van een zelfgemaakte configuratie, daarna gelint en vervolgens gemerged naar een main.css bestand. Vervolgens worden twee JavaScript bestanden gestylechecked, gelint, één van de twee bestanden slaat af naar een minificatie plugin en uiteindelijk worden ze beide samengevoegd tot het main.js bestand. Uiteindelijk eindigt het proces met de taskrunner die aangeeft dat het allemaal succesvol is afgerond zonder enige error.

De taskrunner automatiseert werk waar normaal gesproken een developer zelf tijd aan zou moeten besteden. Tevens kan dit door een taskrunner in een fractie van de tijd gedaan worden en zal er strikt, over de hele code base heen, op een zelfde manier gereviewed worden in plaats van verschillende developers die er met verschillende ogen naar zullen kijken. Dit betekend overigens niet dat code reviews door andere developers meteen zouden moeten worden afgeschaft. De plugins in de taskrunners focussen zich vooral op potentiële bugs en conventie fouten, en dus niet direct op de functionaliteit of efficiëntie van geschreven code. Al met al zorgt dit proces puur voor meer uniforme code wat zowel de kwaliteit als de overdraagbaarheid ten goede zal komen. Wel betekent dit dat er vooraf tijd moet worden vrijgemaakt om een dergelijke pijplijn op te stellen. Maar het allerbelangrijkste is dat wij developers ons daarna weer volledig kunnen gaan richten op wat we echt leuk vinden: het programmeren!

De wereld van taskrunners gaat nog veel verder dan besproken in dit artikel. Zo past dit type automatisatie ook in ‘the bigger picture’ van een project, of zelfs organisatie. Een voorbeeld is DevOps, waar een deel van de Quality Assurance aan de hand van linters/style checkers geijkt zou kunnen worden. Ook kan dit in zijn geheel als buildstep fungeren in een overkoepelend Continuous Delivery proces. Ik raad developers dan ook aan om zelf aan de slag te gaan met één van de verschillende taskrunners. Dit zodat het configureren van plugins, taken en een pijplijn in zijn geheel geen onbekende meer is. In mijn ogen is (basis)kennis over taskrunners namelijk een essentieel onderdeel van de skillset van een front-end developer geworden. Hier kan een project dan wel organisatie vervolgens ook direct de vruchten van gaan plukken.


1 Meer informatie over de taskrunner grunt: http://gruntjs.com/
2 Meer informatie over gulp als taskrunner: http://gulpjs.com/
3 Meer informatie over de broccoli taskrunner: http://broccolijs.com/
4 Een voorbeeld van dit fenomeen kan je nog zien op sites als:
https://validator.w3.org/#validate_by_input of http://csscomb.com/online
5 Meer informatie over node package manager: https://www.npmjs.com/

Over de auteur

Gabriël Moawad
Gabriël Moawad
Gabriël is een creatieve front-end developer met kennis van user experience design. Hij weet niet alleen de koppeling tussen design en back-end soepel te leggen, maar heeft ook oog voor de gebruiksvriendelijkheid van applicaties. Sinds de opkomst van het ‘mobile web’ kijkt Gabriël tegenwoordig verder dan alleen het ontwikkelen voor de traditionele desktop. Hij stort zich nu dan ook enthousiast in de uitdagingen die het mobiele platform met zich mee brengen.

Plaats een reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.