Share
Hva er Gulp? En beskrivelse er at Gulp er en oppgaveløper. En annen ville være at det er et verktøy for å automatisere tidkrevende oppgaver.
Uansett hva du vil kalle det, er det en egenskap som fortsatt er sann: automatisering. La oss grave litt dypere ...
I utgangspunktet bruker du Gulp til å automatisere ting du vanligvis må gjøre manuelt, for eksempel manuelt å samle Sass, manuelt optimalisere bilder, manuelt oppdatere siden din i nettleseren og så videre.
Vel, disse tre handlingene kan konsolideres til uavhengige oppgaver. Da ville du ta de oppgavene og få Gulp til å kjøre dem automatisk. Derfor er verktøy som Gulp and Grunt kalt oppgaveløpere.
En veldig stor forskjell mellom Gulp og de andre oppgavløpene der ute, er måten den håndterer filoperasjoner på. Gulp vil i hovedsak sende en datastrøm fra en plugin til den neste uten å faktisk skrive den streamen i en midlertidig fil mellom disse oppgavene. Det kalles rør eller streaming.
Hvis du søker på nettet for en definisjon for rør, får du sannsynligvis noe veldig teknisk. Så jeg skal prøve å forenkle det litt. En Gulp-arbeidsflyt fungerer med flere forskjellige plugins som utfører ulike operasjoner på enkelte filer.
For å gi deg et eksempel, vil Sass plugin ta en Sass- eller SCSS-fil og kompilere den i en CSS-fil. Uglify-pluginet tar en vanlig JavaScript-fil og reduserer den.
Så tingen med rør er at du kan ta et sett med filer og kjøre dem gjennom et sett med plugins eller gjennom ett plugin. Og du vil få en annen type fil til slutt, akkurat det jeg sa med Sass-plugin. Du starter med en SCSS-fil, og du ender opp med en CSS-fil.
Normalt vil disse typer oppgaveløpere skrive midlertidige filer til disken. Vel, Gulp gjør det ikke, det bruker datastrømmer.
Så innholdet i den filen er faktisk bevart i en buffer-det er en strøm av data i utgangspunktet. Og det er bare passert fra plugin til plugin til det når sitt endelige reisemål. Og mellom disse pluginene går denne strømmen gjennom noen endringer.
Så hva du kan gjøre, for eksempel, starter med SCSS-filene og sender dem ned til Sass-plugin. Nå aksepterer Sass plugin SCSS-filer og returnerer CSS-filer. Så datastrømmen du får etter Sass-plugin er forskjellig fra den som kom inn i plugin.
Og så kan du gjøre flere ting med det. Kanskje du kjører dem gjennom en autoprefixer, ikke sant? Så Gulp vil ta den datastrømmen, og den skal kjøre den gjennom autoprefixer-pluginet, som aksepterer CSS en fil. Og det returnerer også den CSS-filen, men i mellom legger den til alle nødvendige leverandørprefikser. Så det endrer også filens innhold.
Og til slutt kan du redusere det, for eksempel, eller du kan skrive det til en disk. Så det er egentlig hvordan rør fungerer. Du sender data i begynnelsen av strømmen, og du får en annen type data på slutten, og i midten har du disse punktene som utfører bestemte operasjoner på datastrømmen.
Så forhåpentligvis har du nå en grunnleggende forståelse av hva Gulp er. For å få et tydeligere bilde, kan du ta hele kurset, The Web Designer's Guide to Gulp, hvor vi går gjennom hvordan Gulp fungerer i mye mer detaljert.
Du kan ta dette kurset med en gang med et abonnement på Envato Elements. For en enkelt månedlig avgift får du tilgang ikke bare til dette kurset, men også til vårt voksende bibliotek med over 1000 videokurser og bransjeledende e-bøker på Envato Tuts+.
I tillegg får du ubegrensede nedlastinger fra det store Envato Elements-biblioteket med 440 000 + kreative eiendeler. Lag med unike skrifttyper, bilder, grafikk og maler, og lever bedre bedre prosjekter raskere.
Accentsconagua