Share
Wat is Gulp? Een beschrijving is dat Gulp een taakloper is. Een andere is dat het een toolkit is voor het automatiseren van tijdrovende taken.
Hoe je het ook wilt noemen, er is één kenmerk dat nog steeds geldt: automatisering. Laten we een beetje dieper graven ...
In feite gebruikt u Gulp om dingen te automatiseren die u normaal gesproken handmatig zou moeten doen, zoals het handmatig compileren van Sass, het handmatig optimaliseren van afbeeldingen, het handmatig verversen van uw pagina in de browser, enzovoort.
Welnu, deze drie acties kunnen worden geconsolideerd in onafhankelijke taken. Dan zou je die taken nemen en Gulp ze automatisch laten uitvoeren. Dat is waarom tools zoals Gulp en Grunt taakuitlopers worden genoemd.
Een heel groot verschil tussen Gulp en de andere taaklopers die er zijn, is de manier waarop het omgaat met bestandsbewerkingen. Gulp verstuurt in wezen een datastream van de ene plug-in naar de andere zonder die stroom daadwerkelijk in een tijdelijk bestand tussen deze taken te schrijven. Dat wordt piping of streaming genoemd.
Als u op internet zoekt naar een definitie voor piping, krijgt u waarschijnlijk iets heel technischs. Dus ik ga proberen het een beetje te vereenvoudigen. Een Gulp-workflow werkt met verschillende plug-ins die verschillende bewerkingen uitvoeren op bepaalde bestanden.
Om u een voorbeeld te geven, de Sass-plug-in neemt een Sass- of SCSS-bestand en compileert dit in een CSS-bestand. De Uglify-plug-in neemt een normaal JavaScript-bestand en verkleint het.
Dus het probleem met piping is dat je een set bestanden kunt nemen en ze door een set plug-ins of via een plug-in kunt leiden. En uiteindelijk zou je een ander type bestand krijgen, precies wat ik zei met de Sass-plug-in. U begint met een SCSS-bestand en u krijgt uiteindelijk een CSS-bestand.
Normaal gesproken zullen dit soort taaklopers tijdelijke bestanden naar de schijf schrijven. Nou, Gulp doet dat niet - het gebruikt datastromen.
Dus de inhoud van dat bestand wordt eigenlijk bewaard in een buffer - het is in feite een stroom gegevens. En het wordt gewoon doorgegeven van plug-in naar plug-in totdat het zijn eindbestemming heeft bereikt. En tussen deze plug-ins door maakt die stroom enkele wijzigingen.
Dus wat u kunt doen, is bijvoorbeeld beginnen met de SCSS-bestanden en deze doorgeven aan de Sass-plug-in. Nu accepteert de Sass-invoegtoepassing SCSS-bestanden en worden CSS-bestanden geretourneerd. De datastream die u na de Sass-plug-in krijgt, verschilt dus van die in de plug-in.
En dan kun je daar meer dingen mee doen. Misschien laat je ze door een autoprefixer lopen, toch? Dus Gulp neemt die datastream, en die gaat door de autoprefixer-plugin, die CSS een bestand accepteert. En het geeft ook dat CSS-bestand terug, maar daartussen voegt het alle benodigde prefixen van leveranciers toe. Dus het verandert ook de inhoud van dat bestand.
En ten slotte kunt u het verkleinen, of u kunt het naar een schijf schrijven. Dus dat is in wezen hoe piping werkt. U geeft gegevens door aan het begin van de stream en u krijgt aan het einde een ander type gegevens en in het midden heeft u deze punten die bepaalde bewerkingen op die gegevensstroom uitvoeren.
Dus hopelijk heb je nu een basisbegrip van wat Gulp is. Om een duidelijker beeld te krijgen, kunt u de volledige cursus nemen, de gids voor Gulp van The Web Designer, waarin we doornemen hoe Gulp nog veel gedetailleerder werkt.
Je kunt deze cursus meteen volgen met een abonnement op Envato Elements. Voor een enkel laag maandelijks bedrag krijg je niet alleen toegang tot deze cursus, maar ook tot onze groeiende bibliotheek met meer dan 1000 videocursussen en toonaangevende e-boeken over Envato Tuts+.
Bovendien krijgt u nu onbeperkte downloads van de enorme Envato Elements-bibliotheek met meer dan 440.000 creatieve items. Creëer met unieke lettertypen, foto's, afbeeldingen en sjablonen en lever sneller betere projecten.
Accentsconagua