gulp.js
 | |
| Originalförfattare | Eric Schoffstall |
|---|---|
| Utvecklare | Blaine Bublitz, Eric Schoffstall |
| Initial release | 26 september 2013 |
| Stabil frisättning | 4.0.2 / 6 maj 2019
|
| Förvar | |
| Skrivet i | JavaScript |
| Operativ system | Linux , macOS , Windows |
| Plattform | Node.js |
| Typ | Verktygslåda |
| Licens | MIT-licens |
| Hemsida |
|
gulp är en JavaScript -verktygssats med öppen källkod skapad av Eric Schoffstall som används som ett strömmande byggsystem (liknande ett mer paketfokuserat Make ) i front-end webbutveckling .
Det är en task runner byggd på Node.js och npm , som används för automatisering av tidskrävande och repetitiva uppgifter involverade i webbutveckling som minifiering , sammanlänkning, cache-busting, enhetstestning , linting , optimering, etc.
gulp använder ett tillvägagångssätt för kod-över-konfiguration för att definiera sina uppgifter och förlitar sig på sina små plugins för enstaka ändamål för att utföra dem. Gulp-ekosystemet inkluderar mer än 3500 sådana plugins.
Översikt
gulp är ett byggverktyg i JavaScript byggt på nodströmmar . Dessa strömmar underlättar anslutningen av filoperationer genom pipelines . gulp läser filsystemet och skickar data till hands från en plugin med en enda syfte till en annan genom .pipe() -operatorn, och gör en uppgift i taget. Originalfilerna påverkas inte förrän alla plugins har bearbetats. Den kan konfigureras antingen för att modifiera originalfilerna eller för att skapa nya. Detta ger möjligheten att utföra komplexa uppgifter genom att länka dess många plugins. Användarna kan också skriva sina egna plugins för att definiera sina egna uppgifter. Till skillnad från andra uppgiftslöpare som kör uppgifter genom konfiguration, kräver gulp kunskap om JavaScript och kodning för att definiera sina uppgifter. gulp är ett byggsystem vilket innebär att förutom att köra uppgifter kan det också kopiera filer från en plats till en annan, kompilera , distribuera , skapa meddelanden, enhetstestning, linting, etc.
Behöver en uppgiftslöpare
Task-runners som gulp och Grunt är byggda på Node.js snarare än npm eftersom de grundläggande npm-skripten är ineffektiva när man kör flera uppgifter. Även om vissa utvecklare föredrar npm- skript eftersom de kan vara enkla och lätta att implementera, finns det många sätt där gulp och Grunt verkar ha en fördel gentemot varandra, och standardskripten. Grunt kör uppgifter genom att transformera filer och sparar dem som nya i tillfälliga mappar, och utdata från en uppgift tas som indata för en annan och så vidare tills utdata når målmappen. Detta innebär många I/O- samtal och skapandet av många temporära filer. Medan klunkströmmar genom filsystemet inte kräver någon av dessa tillfälliga platser, vilket minskar antalet I/O-samtal, vilket förbättrar prestandan. Grunt använder konfigurationsfiler för att utföra uppgifter, medan gulp kräver att dess byggfil kodas. I Grunt måste varje plugin konfigureras för att matcha dess ingångsplats med föregående plugins utdata. I gulp är plugins automatiskt pipe-lined.
Drift
Gulp-uppgifterna körs från ett kommandoradsgränssnitt (CLI)-skal och kräver två filer, package.json , som används för att lista de olika plugin-programmen för gulp, och gulpfile.js (eller helt enkelt gulpfile ), dessa, enligt build verktygskonvention, finns ofta i rotkatalogen för paketets källkod. Gulpfilen innehåller det mesta av logiken som gulp behöver för att köra sina bygguppgifter. Först laddas alla nödvändiga moduler och sedan definieras uppgifter i gulpfilen. Alla nödvändiga plugins som anges i gulpfilen listas i avsnittet devDependencies i Standarduppgiften körs av $gulp . Individuella uppgifter kan definieras av gulp.task och körs av gulp <task> <othertask> . Komplexa uppgifter definieras genom att kedja plugins med hjälp av .pipe() -operatorn.
Anatomi av gulpfile
gulpfile är platsen där alla operationer definieras i gulp. Gulpfilens grundläggande anatomi består av nödvändiga plugins som ingår i toppen, definition av uppgifterna och en standarduppgift i slutet.
Plugins
Alla installerade plugin som krävs för att utföra en uppgift ska läggas till högst upp i gulpfilen som ett beroende i följande format.
//Att lägga till beroenden var gulp = require ( 'gulp' ) ;
Uppgifter
Uppgifterna kan sedan skapas. En gulp-uppgift definieras av gulp.task och tar namnet på uppgiften som den första parametern och en funktion som den andra parametern.
Följande exempel visar skapandet av en klunk-uppgifter. Den första parametern taskName är obligatorisk och anger namnet med vilket uppgiften i skalet kan köras.
suga . task ( 'taskName' , function () { //do something });
Alternativt kan en uppgift som utför flera fördefinierade funktioner skapas. Dessa funktioner skickas som den andra parametern i form av en array.
funktion fn1 () { // gör något } funktion fn2 () { // gör något } // Uppgift med en rad funktionsnamn gulp . uppgift ( 'taskName' , gulp . parallell ( fn1 , fn2 ));
Standarduppgift
Standarduppgiften ska definieras i slutet av gulpfilen. Det kan köras av gulp -kommandot i skalet. I fallet nedan gör standarduppgiften ingenting.
// Gulp standarduppgift gulp . uppgift ( 'default' , fn );
Standarduppgiften används i gulp för att köra valfritt antal beroende deluppgifter definierade ovan i sekventiell ordning automatiskt. gulp kan också övervaka källfiler och köra en lämplig uppgift när ändringar görs i filerna. Underuppgifterna ska nämnas som elementen i arrayen i den andra parametern. Processen kan utlösas genom att helt enkelt köra standarduppgiften med kommandot gulp .
Exempel på uppgifter
Bilduppgift
Moduldefinitionen kan vara i början av Gulpfile.js så här:
var imagemin = require ( 'gulp-imagemin' ) ;
Den efterföljande bilduppgiften optimerar bilder. gulp.src() hämtar alla bilder med tillägget .png, .gif eller .jpg i katalogen ' images-orig/'.
.pipe(imagemin()) kanaliserar bilderna som hittas genom optimeringsprocessen och med .pipe(gulp.dest()) sparas de optimerade bilderna i mappen 'images/' . Utan gulp.dest() skulle bilderna verkligen vara optimerade, men de lagras inte. Eftersom de optimerade bilderna lagras i en annan mapp förblir originalbilderna oförändrade.
// Bilder uppgift gulp . uppgift ( 'images' , function () { return gulp . src ( 'images/*.{png,gif,jpg}' ) . pipe ( imagemin ()) . pipe ( gulp . dest ( 'dist/images/' ) ); });
Skriptuppgift
I följande exempel är alla JavaScript-filer från katalogen scripts/ optimerade med .pipe(uglify()) och gulp.dest('scripts/') skriver över originalfilerna med utdata. För detta måste man först återgå till den erforderliga gulp-uglify-plugin på npm -paketinstallatören och i början av gulpfile bör modulen definieras.
// Skriptuppgift gulp . task ( 'scripts' , function () { return gulp . src ( 'scripts/*.js' ) . pipe ( uglify ()) . pipe ( gulp . dest ( 'scripts/' )); });
Titta på Task
Watch-uppgiften tjänar till att reagera på ändringar i filer. I följande exempel anropas uppgifterna med namnen skript och bilder när någon av JavaScript-filer eller bilder ändras i de angivna katalogerna.
// Kör uppgiften igen När en fil ändras gulp . uppgift ( 'watch' , function ( cb ) { gulp . watch ( 'scripts/js/**' , scripts ); gulp . watch ( 'images/**' , images ); cb (); });
Dessutom är det möjligt att utföra en uppdatering av webbläsarens innehåll med hjälp av Watch-uppgifterna. För detta finns det många alternativ och plugins.
Se även
Litteratur
- Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Utveckla en Gulp Edge (första upplagan). Bleeding Edge Press. ISBN 978-1-939902-14-6 .
- Den Odell (2014). "Bygg verktyg och automation". Pro JavaScript-utvecklingskodning, funktioner och verktyg . Apress. ISBN 978-1-4302-6268-8 .
- Maynard, Travis (2015). Komma igång med Gulp . Packt Publishing Ltd. ISBN 9781784393472 .