5 handige Gulp plugins om je workflow te automatiseren

-

Ooit wel eens halverwege in een project gestapt en gedacht, dit kan een stuk beter en efficiënter? Wie niet? Na enkele keren handmatig een release te maken, en alle configuraties goed zetten om hier vervolgens een zip bestand te maken, was de maat vol. Al snel had ik wat tijd gevonden om gebruik te kunnen maken van Gulp. Gulp is een JavaScript taskrunner op basis van Node.js en moet het leven van frontend developers een stuk aangenamer maken. Het gebruik van Gulp om je workflow te automatiseren en te optimaliseren is een inspanning waarbij het hele team uiteindelijk bij gebaat is omdat je zo sneller en efficiënter kunt werken. Uiteindelijk scheelt dit een hoop tijd tijdens het development proces en het maken van bijvoorbeeld releases. Mijn advies: Zorg er voor dat je aangeeft dat dit voordelen heeft voor het hele team zodat je hier tijd voor krijgt.

Hieronder een overzicht met enkele plugins die jou kunnen helpen het automatiseren van je buildproces:

Browsersync

Browsersync is een plugin die erg populair is en ik eigenlijk altijd gebruik bij nieuwe projecten. Browsersync heeft meerdere mogelijkheden waaronder; meerdere browsers synchroniseren om gelijktijdig testen mogelijk te maken, netwerkverkeer te regelen, interactie te synchroniseren over de verschillende browser en automatisch browsers te herladen zodra HTML, CSS, Javascript of andere bestanden zijn aangepast.

Gulp load plugins

Toen ik voor het eerst begon met het schrijven van Gulp taken waren de eerste regels code het handmatig benoemen van alle plugins die gebruikt werden. Hierdoor heeft een groot project bijvoorbeeld wel een stuk of 15/20 plugins die als eerst benoemd worden. Omdat ik op zoek was naar een mogelijkheid om dit gemakkelijker te maken kwam ik de plugin “Gulp load plugins” tegen. Op deze manier kun je plugins automatisch toevoegen aan je Gulp taak.

Run sequence

Run sequence zorgt ervoor dat Gulp taken in een specifieke volgorde worden uitgevoerd. Dit kan handig zijn in de situatie waarbij je afhankelijk bent totdat een andere taak of taken zijn afgerond.

Autoprefixer

Een andere plugin die niet mag ontbreken is Autoprefixer. Deze plugin zorgt ervoor dat de CSS uitgelezen word en waar nodig vendorprefixes worden toegevoegd voor de verschillende browsers met de waardes van de website Can I Use.

Strip debug

Een simpele maar belangrijke plugin is “Strip debug”. De naam zegt al genoeg, het verwijderd console en debugger statements uit je code. Hoe vaak komt het bijv. niet voor dat er per ongeluk nog een console log ergens in de code staat en deze al gedeployed is op de acceptatie of zelfs de productie omgeving? Met deze plugin is dat nu verleden tijd!

Uiteraard zijn er nog veel meer nuttige plugins te vinden en ik ben ook benieuwd welke plugins jij gebruikt om je leven als frontend developer iets aangenamer te maken.

De Gulp plugins: