Automatisering via Grunt

In de afgelopen maanden zijn we (met de front-end developers bij Intracto) stilaan overgestapt naar een volledig geautomatiseerde workflow met behulp van Grunt. Dit heeft uiteindelijk als gevolg dat we uniformer en met een hogere kwaliteit projecten opleveren.

Geen automatisering betekent geen uniforme structuur en hierdoor werkte in het verleden elke front-end developer op zijn eigen manier. Hierdoor was de kennis over de structuur en de werkwijze steeds geïsoleerd bij één persoon. 

Met Grunt hebben we nu bij Intracto hiervoor een oplossing gevonden. Een flexibele en simpele oplossing die cross-platform altijd en overal werkt met één commando.

node.js

Grunt is gebouwd op node.js en maakt gebruik van node's package manager (aka npm). NPM leeft van community based plugins waar ook Grunt er eentje van is. Grunt zelf maakt ook gebruik van dit grote aanbod aan packages.

Libsass

Bij Intracto gebruiken we Sass voor het schrijven van onze stylesheets. Omdat Sass geschreven is in de programmeertaal ruby en deze niet bekend staat om haar snelheid, gebruiken we een C/C++ port genaamd LibSass. Waar uiteraard ook een Grunt-plugin voor is.

Hierdoor lopen we wel enkele versies achter op de originele SASS-versie. De belangrijkste functionaliteiten zijn gelukkig wel volledig overgenomen. Recent is zo ook extending geïntegreerd in Libsass dankzij een $2.000 bounty ondersteund door enkele bekende namenHalleluja!

Het monitoren van bestanden

Grunt laat je toe om een bepaald bestand, folder of extensie te monitoren voor wijzigingen. Dit laat ons toe om op een slimme manier taken te 'triggeren'. 

Een concreet voorbeeld: wanneer je een SVG-icon wijzigt, wordt dit icoon automatisch geoptimaliseerd. Daarna gaat een andere task deze naar data-uri converteren waarop livereloading merkt dat er iets gewijzigd wordt in onze stylesheets en hij deze aangepaste SVG toont.

Werkende LiveReload

Een out of the box livereload die altijd en overal werkt over allerlei devices zonder setup-tijd. Dankzij een custom Drupalmodule die in elk nieuw project zit, wordt er aan de hand van een environment variable een livereload-script geplaatst. Door het werken met die environment variable, wordt de livereload-code enkel op developmentomgevingen meegenomen en zal deze niet op productie aanwezig zijn.

 

One click deployment

Dankzij Grunt tasks kunnen we specifieke build-opdrachten maken die aangeroepen worden tijdens het deployment-process (voor de geïnteresseerden: wij gebruiken Bamboo). Dit resulteert in kleinere en meer geoptimaliseerde objecten, specifiek voor een productie-omgeving. Enkele van onze optimalisaties uitgelicht:

  • Cssshrink zorgt ervoor dat dubbele css verwijderd wordt.
  • Svgmin verwijdert bloat in de broncode.
  • SVG data-uri's vermijdt http-requests
  • Critical css voorkomt render blocking.
  • Autoprefixer zodat we zorgeloos css kunnen schrijven.
  • Contrib-uglify om javascript een minify te laten ondergaan (verwijderen van console.logs etc...).
  • Afbeeldingen comprimeren en optimaliseren.

Conclusie

Deze uniforme automatisering met Grunt is voor de Front-end developer binnen Intracto een essentieel hulpmiddel geworden voor een snelle en kwalitatieve oplevering van projecten. 

Ook de andere teams van Intracto trekken de automatisatie meer en meer door. Dit gaat van geautomatiseerde unit-testing van php-code over het opzetten van rapportage door de online marketeers.

Meer weten? Contacteer ons!

Door Intracto