Gulp för nybörjare

Gulp är ett verktyg som hjälper dig med flera uppgifter när det gäller webbutveckling. Det används ofta för att göra front-end uppgifter som t.ex:

• Spinning av en webbserver
• Laddning av webbläsaren automatiskt när en fil sparas
• Användning av preprocessorer som Sass eller LESS
• Optimering av tillgångar som CSS, JavaScript och bilder

Viktig anmärkning! Den här artikeln skrevs för Gulp 3.x, men nu är Gulp 4.x ute och rekommenderas. Som alla större versionsändringar har API:erna brytande ändringar. Om du installerar Gulp 4 och försöker göra några av sakerna i den här artikeln kommer de inte att fungera. Vi kommer att göra några anteckningar om det här för att påminna dig. Det här ser ut som en ganska bra Gulp 4-startare.

Det här är inte en heltäckande lista över saker som Gulp kan göra. Om du är tillräckligt galen kan du till och med bygga en statisk webbplatsgenerator med Gulp (jag har gjort det!). Så ja, Gulp är extremt kraftfullt, men du måste lära dig att använda Gulp om du vill skapa dina egna anpassade byggprocesser.

Så det är vad den här artikeln är till för. Den hjälper dig att bli så bra på grunderna i Gulp att du kan börja utforska allt annat själv.

Innan vi dyker ner i arbetet med Gulp ska vi tala om varför du kanske vill använda Gulp i motsats till andra liknande verktyg.

Varför Gulp?

Verktyg som Gulp kallas ofta för ”byggverktyg” eftersom de är verktyg för att köra uppgifterna för att bygga en webbplats. De två mest populära byggverktygen som finns där ute just nu är Gulp och Grunt. (Chris har ett inlägg om hur man kommer igång med Grunt här). Men det finns förstås andra. Broccoli fokuserar på sammanställning av tillgångar, en av de vanligaste byggverktygsuppgifterna.

Det finns redan flera artiklar som täcker skillnaden mellan Grunt och Gulp och varför du kan använda den ena framför den andra. Du kan kolla in den här artikeln, den här eller den här om du är intresserad av att ta reda på mer. Brunch är liknande i sitt fokus på tillgångar, och det buntar in några av de vanligaste andra uppgifterna som en server och file watcher.

Den största skillnaden är hur du konfigurerar ett arbetsflöde med dem. Gulp-konfigurationer tenderar att vara mycket kortare och enklare jämfört med Grunt. Gulp tenderar också att köras snabbare.

Låt oss nu gå vidare och ta reda på hur du konfigurerar ett arbetsflöde med Gulp.

Vad vi ställer in

I slutet av den här artikeln kommer du att ha ett arbetsflöde som utför de uppgifter som vi beskrev i början av den här artikeln:

• Spinner upp en webbserver
• Kompilerar Sass till CSS
• Förnyar webbläsaren automatiskt när du sparar en fil
• Optimerar alla tillgångar (CSS, JS, typsnitt och bilder) för produktion

Du lär dig också att kedja ihop olika uppgifter till enkla kommandon som är lätta att förstå och utföra.

Låt oss börja med att installera Gulp på din dator.

Installera Gulp

Du måste ha Node.js (Node) installerat på din dator innan du kan installera Gulp.

Om du inte redan har Node installerat kan du få det genom att hämta paketinstallationsprogrammet från Nodes webbplats.

När du är klar med installationen av Node kan du installera Gulp genom att använda följande kommando på kommandoraden:

$ sudo npm install gulp -g

Notera: Endast Mac-användare behöver nyckelordet sudo. (Se den första kommentaren av Pawel Grzybek om du inte vill använda sudo). Och kom ihåg att ”$” i koden ovan bara symboliserar kommandotolken. Det är faktiskt inte en del av kommandot du kör.

Det npm install-kommando vi har använt här är ett kommando som använder Node Package Manager (npm) för att installera Gulp på din dator.

Flaggan -g i det här kommandot talar om för npm att installera Gulp globalt på din dator, vilket gör att du kan använda kommandot gulp var som helst på ditt system.

Mac-användare behöver det extra nyckelordet sudo i kommandot eftersom de behöver administratörsrättigheter för att installera Gulp globalt.

Nu när du har Gulp installerat ska vi göra ett projekt som använder Gulp.

Skapa ett Gulp-projekt

Först skapar vi en mapp som heter project för att servera som vår projektrot när vi går igenom den här handledningen. Kör kommandot npm init från den mappen:

# ... from within our project folder$ npm init

Kommandot npm init skapar en package.json-fil för ditt projekt som lagrar information om projektet, t.ex. de beroenden som används i projektet (Gulp är ett exempel på ett beroende).

npm init kommer att fråga dig:

När package.json-filen är skapad kan vi installera Gulp i projektet genom att använda följande kommando:

$ npm install gulp --save-dev

Den här gången installerar vi Gulp i project istället för att installera det globalt, vilket är anledningen till att det finns vissa skillnader i kommandot.

Du ser att nyckelordet sudo inte behövs eftersom vi inte installerar Gulp globalt, så -g behövs inte heller. Vi har lagt till --save-dev, som talar om för datorn att lägga till gulp som ett dev-beroende i package.json.

Om du kontrollerar projektmappen när kommandot är färdigt att exekveras bör du se att Gulp har skapat en node_modules-mapp. Du bör också se en mapp gulp inom node_modules.

Vi är nästan redo att börja arbeta med Gulp. Innan vi gör det måste vi ha klart för oss hur vi ska använda Gulp i projektet, och en del av det är att bestämma en mappstruktur.

Bestämma mappstruktur

Gulp är tillräckligt flexibelt för att fungera med vilken mappstruktur som helst. Du måste bara förstå de inre funktionerna innan du anpassar den för ditt projekt.

För den här artikeln kommer vi att använda strukturen för en generisk webapp:

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

I denna struktur kommer vi att använda mappen app för utvecklingsändamål, medan mappen dist (som i ”distribution”) används för att innehålla optimerade filer för produktionsplatsen.

Då app används i utvecklingssyfte kommer all vår kod att placeras i app.

Vi måste ha den här mappstrukturen i åtanke när vi arbetar med våra Gulp-konfigurationer. Nu börjar vi med att skapa din första Gulp-uppgift i gulpfile.js, som lagrar alla Gulp-konfigurationer.

Skriva din första Gulp-uppgift

Det första steget för att använda Gulp är att require det i gulpfilen.

var gulp = require('gulp');

Anvisningen require talar om för Node att leta i mappen node_modules efter ett paket som heter gulp. När paketet har hittats tilldelar vi dess innehåll till variabeln gulp.

Vi kan nu börja skriva en gulp-uppgift med denna gulp-variabel. Den grundläggande syntaxen för en gulp-uppgift är:

gulp.task('task-name', function() { // Stuff here});

task-name hänvisar till namnet på uppgiften, som skulle användas när du vill köra en uppgift i Gulp. Du kan också köra samma uppgift på kommandoraden genom att skriva gulp task-name.

För att testa det skapar vi en hellouppgift som lyder Hello Zell!.

gulp.task('hello', function() { console.log('Hello Zell');});

Vi kan köra den här uppgiften med gulp hello på kommandoraden.

$ gulp hello

Kommandoraden returnerar en logg som säger Hello Zell!.

Gulp-uppgifterna är vanligtvis lite mer komplexa än så här. Den innehåller vanligtvis ytterligare två Gulp-metoder samt en mängd olika Gulp-plugins.

Här är hur en riktig uppgift kan se ut:

Som du kan se innehåller en riktig uppgift två ytterligare Gulp-metoder – gulp.src och gulp.dest.

gulp.src talar om för Gulp-uppgiften vilka filer som ska användas för uppgiften, medan gulp.dest talar om för Gulp var filerna ska skickas ut när uppgiften är slutförd.

Låt oss prova att bygga en riktig uppgift där vi kompilerar Sass-filer till CSS-filer.

Förbehandling med Gulp

Vi kan kompilera Sass till CSS i Gulp med hjälp av ett plugin som heter gulp-sass. Du kan installera gulp-sass i ditt projekt genom att använda kommandot npm install som vi gjorde för gulp.

Vi skulle också vilja använda flaggan --save-dev för att se till att gulp-sass läggs till i devDependencies i package.json.

$ npm install gulp-sass --save-dev

Vi måste require gulp-sass från mappen node_modules precis som vi gjorde med gulp innan vi kan använda insticksprogrammet.

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Vi kan använda gulp-sass genom att ersätta aGulpPlugin() med sass(). Eftersom uppgiften är tänkt att kompilera Sass till CSS kan vi kalla den sass.

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Vi måste förse uppgiften sass med källfiler och en destination för att uppgiften ska fungera, så låt oss skapa en styles.scss-fil i mappen app/scss. Denna fil kommer att läggas till i sass-uppgiften i gulp.src.

Vi vill ge ut den eventuella styles.css-filen till mappen `app/css`, vilket skulle vara destination för gulp.dest.

Vi vill testa att uppgiften sass fungerar som vi vill. För att göra det kan vi lägga till en Sass-funktion inom styles.scss.

// styles.scss.testing { width: percentage(5/7);}

Om du kör gulp sass på kommandoraden bör du nu kunna se att en styles.css-fil skapades i app/css. Dessutom har den koden där percentage(5/7) utvärderades till 71.42857%.

/* styles.css */.testing { width: 71.42857%; }

Det är så vi vet att uppgiften sass fungerar!

Ibland behöver vi möjlighet att kompilera mer än en .scss-fil till CSS samtidigt. Det kan vi göra med hjälp av Node globs.

Globbing in Node

Globs är matchningsmönster för filer som gör det möjligt att lägga till mer än en fil i gulp.src. Det är som reguljära uttryck, men specifikt för filvägar.

När du använder en glob kontrollerar datorn filnamn och sökvägar efter det angivna mönstret. Om mönstret finns, matchas en fil.

De flesta arbetsflöden med Gulp tenderar att endast kräva fyra olika globmönster:

1. *.scss: Mönstret * är ett jokertecken som matchar alla mönster i den aktuella katalogen. I det här fallet matchar vi alla filer som slutar med .scss i rotmappen (project).
2. **/*.scss: Det här är en mer extrem version av *-mönstret som matchar alla filer som slutar med .scss i rotmappen och alla underordnade kataloger.
3. !not-me.scss: ! indikerar att Gulp ska exkludera mönstret från sina matchningar, vilket är användbart om du skulle behöva exkludera en fil från ett matchat mönster. I det här fallet skulle not-me.scss uteslutas från matchningen.
4. *.+(scss|sass): Pluset + och parentesen () gör det möjligt för Gulp att matcha flera mönster, där de olika mönstren skiljs åt med pipetecknet |. I det här fallet matchar Gulp alla filer som slutar med .scss eller .sass i rotmappen.

Alla andra Sass-filer som hittas inom app/scss skulle automatiskt inkluderas i sass-uppgiften med den här ändringen. Om du lägger till en print.scss-fil i projektet ser du att print.css kommer att genereras i app/css.

Vi har nu lyckats kompilera alla Sass-filer till CSS-filer med ett enda kommando. Frågan är vad det tjänar till om vi måste köra gulp sass manuellt varje gång vi vill kompilera Sass till CSS?

Troligtvis kan vi säga till Gulp att automatiskt köra uppgiften sass varje gång en fil sparas genom en process som kallas ”watching”.

Bevaka Sass-filer för ändringar

Notera! Gulp Watch var en av de saker som ändrades mycket från 3.x till 4.x. Se dokumentationen.

Gulp förser oss med en watch metod som kontrollerar om en fil har sparats. Syntaxen för watch-metoden är:

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', ); 

Mer ofta vill vi dock titta på mer än en typ av fil samtidigt. För att göra det kan vi gruppera ihop flera bevakningsprocesser till en watch-uppgift:

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Om du körde gulp watch-kommandot just nu ser du att Gulp börjar titta omedelbart.

Och att den automatiskt kör sass-uppgiften när du sparar en .scss-fil.

Låt oss ta det ett steg längre och få Gulp att ladda om webbläsaren när vi sparar en .scss-fil med hjälp av Browser Sync.

Live-laddning med Browser Sync

Browser Sync hjälper till att göra webbutveckling enklare genom att spinna upp en webbserver som hjälper oss att göra live-laddning enkelt. Den har även andra funktioner, t.ex. synkronisering av åtgärder på flera enheter.

Vi måste först installera Browser Sync:

$ npm install browser-sync --save-dev

Du kanske har märkt att det inte finns något gulp- prefix när vi installerar Browser Sync. Detta beror på att Browser Sync fungerar med Gulp, så vi behöver inte använda ett plugin.

För att använda Browser Sync måste vi require Browser Sync.

var browserSync = require('browser-sync').create();

Vi måste skapa en browserSyncuppgift för att göra det möjligt för Gulp att starta en server med Browser Sync. Eftersom vi kör en server måste vi låta Browser Sync veta var serverns rot ska ligga. I vårt fall är det mappen `app`:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

Vi måste också ändra vår sass-uppgift något så att Browser Sync kan injicera nya CSS-stilar (uppdatera CSS) i webbläsaren när sass-uppgiften körs.

Vi är klara med konfigurationen av Browser Sync. Nu måste vi köra både watch– och browserSync-uppgifterna samtidigt för att live-återladdning ska ske.

Det blir besvärligt att öppna två kommandoradsfönster och köra gulp browserSync och gulp watch separat, så låt oss få Gulp att köra dem tillsammans genom att tala om för watch-uppgiften att browserSync måste slutföras innan watch tillåts köra.

Vi kan göra det genom att lägga till ett andra argument till watch-uppgiften. Syntaxen är:

gulp.task('watch', , function (){ // ...})

Och i det här fallet lägger vi till uppgiften browserSync.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Vi vill också se till att sass körs före watch så att CSS redan är den senaste när vi kör ett Gulp-kommando.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Nu, om du kör gulp watch på kommandoraden bör Gulp starta både sass och browserSync samtidigt. När båda uppgifterna är slutförda kommer watch att köras.

Till samma tid skulle också ett webbläsarfönster som pekar på app/index.html dyka upp. Om du ändrar styles.scss-filen kommer du att se att webbläsaren laddas om automatiskt.

Det finns en sak till innan vi avslutar detta avsnitt om live-återladdning. Eftersom vi redan håller utkik efter .scss-filer som ska laddas om, varför inte gå ett steg längre och ladda om webbläsaren om någon HTML- eller JavaScript-fil sparas?

Vi kan göra det genom att lägga till ytterligare två bevakningsprocesser och anropa browserSync.reload-funktionen när en fil sparas:

So långt i den här handledningen har vi tagit hand om tre saker:

1. Spinning av en webbserver för utveckling
2. Användning av preprocessorn Sass
3. Laddning av webbläsaren när en fil sparas

Låt oss täcka delen om optimering av tillgångar i nästa avsnitt. Vi börjar med att optimera CSS- och JavaScript-filer.

Optimering av CSS- och JavaScript-filer

Utvecklare har två uppgifter att utföra när vi försöker optimera CSS- och JavaScript-filer för produktion: minifiering och konkatenation.

Ett problem som utvecklare möter när de automatiserar den här processen är att det är svårt att sammanfoga skript i rätt ordning.

Säg att vi har inkluderat 3 skripttaggar i index.html.

Dessa skript finns i två olika kataloger. Det blir svårt att sammanlänka dem med traditionella plugins som gulp-concatenate.

Tacksamt nog finns det ett användbart Gulp-plugin, gulp-useref som löser det här problemet.

Gulp-useref sammanfogar ett valfritt antal CSS- och JavaScript-filer till en enda fil genom att leta efter en kommentar som börjar med ”<!-build:” och slutar med ”<!-endbuild->”. Syntaxen är följande:

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> kan antingen vara js, css eller remove. Det är bäst att ställa in type till den typ av fil som du försöker sammanfoga. Om du anger type till remove tar Gulp bort hela byggblocket utan att generera en fil.

<path> hänvisar här till målsökvägen för den genererade filen.

Vi vill att den slutliga JavaScript-filen ska genereras i mappen js, som main.min.js. Därför skulle markeringen vara:

Nu konfigurerar vi insticksprogrammet gulp-useref i gulpfilen. Vi måste installera insticksprogrammet och kräva det i gulpfilen.

$ npm install gulp-useref --save-dev

var useref = require('gulp-useref');

Inställandet av useref-uppgiften liknar de andra uppgifterna vi har gjort hittills. Här är koden:

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Om du kör denna useref-uppgift kommer Gulp att köra igenom de tre skripttaggarna och sammanfoga dem till dist/js/main.min.js.

Filen är dock inte minifierad just nu. Vi måste använda insticksprogrammet gulp-uglify för att hjälpa till med att minifiera JavaScript-filer. Vi behöver också ett andra plugin som heter gulp-if för att se till att vi bara försöker minifiera JavaScript-filer.

$ npm install gulp-uglify --save-dev 

Gulp bör nu automatiskt minifiera filen `main.min.js` när du kör uppgiften useref.

En snygg sak som jag ännu inte har avslöjat med Gulp-useref är att den automatiskt ändrar alla skript inom ”<!-build:” och ”<!-endbuild->” till en enda JavaScript-fil som pekar på `js/main.min.js`.

Värligt, eller hur?

Vi kan använda samma metod för att sammanfoga eventuella CSS-filer (om du bestämt dig för att lägga till fler än en) också. Vi följer samma process och lägger till en build kommentar.

Vi kan också minifiera den concatenerade CSS-filen också. Vi behöver använda ett paket som heter gulp-cssnano plugin för att hjälpa oss med minifieringen.

$ npm install gulp-cssnano

Nu får du en optimerad CSS-fil och en optimerad JavaScript-fil när du kör useref uppgiften.

Vi går vidare och optimerar bilderna härnäst.

Optimering av bilder

Du har antagligen gissat det vid det här laget; vi måste använda gulp-imagemin för att hjälpa oss med att optimera bilder.

$ npm install gulp-imagemin --save-dev

var imagemin = require('gulp-imagemin');

Vi kan minifiera png, jpg, gif och till och med svg med hjälp av gulp-imagemin. Låt oss skapa en images uppgift för denna optimeringsprocess.

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Då olika filtyper kan optimeras på olika sätt kanske du vill lägga till alternativ till imagemin för att anpassa hur varje fil optimeras.

Till exempel kan du skapa interlaced GIF-filer genom att ställa in alternativnyckeln interlaced till true.

Du kan leka med andra alternativ om du vill också.

Optimering av bilder är dock en extremt långsam process som du inte vill upprepa om det inte är nödvändigt. För att göra det kan vi använda pluginprogrammet gulp-cache.

$ npm install gulp-cache --save-dev

Vi är nästan klara med optimeringsprocessen. Det finns ytterligare en mapp som vi måste överföra från katalogen `app` till `dist`, teckensnittskatalogen. Låt oss göra det nu.

Kopiera typsnitt till Dist

Med tanke på att typsnittsfilerna redan är optimerade finns det inget mer vi behöver göra. Allt vi behöver göra är att kopiera teckensnitten till dist.

Vi kan kopiera filer med Gulp helt enkelt genom att ange gulp.src och gulp.dest utan några plugins.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Nu kommer Gulp att kopiera `fonts` från `app` till `dist` när du kör gulp fonts.

Vi har 6 olika uppgifter i gulpfilen nu, och var och en av dem måste anropas individuellt med kommandoraden, vilket är ganska besvärligt så vi vill binda ihop allt till ett enda kommando.

Innan vi gör det ska vi dock titta på hur vi rensar upp genererade filer automatiskt.

Rensning av genererade filer automatiskt

Då vi genererar filer automatiskt vill vi se till att filer som inte längre används inte ligger kvar någonstans utan att vi vet om det.

Denna process kallas rensning (eller i enklare termer, radering av filer).

Vi måste använda del för att hjälpa oss med rensningen.

npm install del --save-dev

var del = require('del');

Funktionen del tar in en array av node globs som talar om vilka mappar som ska raderas.

Att sätta upp den med en Gulp-uppgift är nästan som det första ”hello”-exemplet vi hade.

gulp.task('clean:dist', function() { return del.sync('dist');})

Nu raderar Gulp mappen `dist` åt dig när gulp clean:dist körs.

Notera: Vi behöver inte oroa oss för att radera mappen dist/images eftersom gulp-cache redan har lagrat cachen för bilderna på ditt lokala system.

För att rensa cachen från ditt lokala system kan du skapa en separat uppgift som heter `cache:clear`

gulp.task(’cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Phew, det var en ordentlig mundering. Låt oss kombinera alla våra uppgifter tillsammans nu!

Kombinera Gulp-uppgifter

Låt oss sammanfatta vad vi har gjort. Hittills har vi skapat två olika uppsättningar Gulp-uppgifter.

Den första uppsättningen är för en utvecklingsprocess, där vi kompilerade Sass till CSS, tittade efter ändringar och laddade om webbläsaren i enlighet med detta.

Den andra uppsättningen är för en optimeringsprocess, där vi förbereder alla filer för produktionswebbplatsen. Vi optimerade tillgångar som CSS, JavaScript och bilder i den här processen och kopierade typsnitt över från app till dist.

Vi har redan grupperat den första uppsättningen uppgifter till ett enkelt arbetsflöde med kommandot gulp watch:

gulp.task('watch', , function (){ // ... watchers})

Den andra uppsättningen består av uppgifter som vi måste köra för att skapa produktionswebbplatsen. Detta inkluderar clean:dist, sass, useref, images och fonts.

Om vi följer samma tankegång skulle vi kunna skapa en build-uppgift för att kombinera allting tillsammans.

gulp.task('build', , function (){ console.log('Building files');})

Tyvärr skulle vi inte kunna skriva uppgiften build på det här sättet eftersom Gulp aktiverar alla uppgifter i det andra argumentet samtidigt.

Det finns en möjlighet att useref, images eller till och med fonts avslutas innan clean gör det, vilket innebär att hela mappen `dist` raderas.

För att se till att rensningar avslutas före resten av uppgifterna måste vi alltså använda ett extra insticksprogram som heter Run Sequence.

$ npm install run-sequence --save-dev

Här är syntaxen för en uppgiftssekvens med run sequence:

När task-name anropas kommer Gulp att köra task-one först. När task-one är klar startar Gulp automatiskt task-two. När task-two är klar kör Gulp slutligen task-three.

Körsekvens gör det också möjligt att köra uppgifter samtidigt om du placerar dem i en array:

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

I det här fallet kör Gulp först task-one. När task-one är klar kör Gulp alla uppgifter i det andra argumentet samtidigt. Alla uppgifter i det här andra argumentet måste vara slutförda innan task-three körs:

Så vi kan nu skapa en uppgift som ser till att clean:dist körs först, följt av alla andra uppgifter:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

För att göra saker och ting konsekventa kan vi också bygga samma sekvens med den första gruppen. Låt oss använda default som uppgiftsnamn den här gången:

gulp.task('default', function (callback) { runSequence(, callback )})

Varför default? Därför att när du har en uppgift som heter default kan du köra den helt enkelt genom att skriva kommandot gulp, vilket sparar några tangenttryckningar.

Slutligt, här är en github repo för allt arbete vi har gjort!

Slut på det hela

Vi har gått igenom de absoluta grunderna i Gulp och skapat ett arbetsflöde som kan kompilera Sass till CSS samtidigt som vi bevakar HTML- och JS-filer för ändringar på samma gång. Vi kan köra den här uppgiften med kommandot gulp på kommandoraden.

Vi har också byggt en andra uppgift, build, som skapar en dist-mapp för produktionswebbplatsen. Vi kompilerade Sass till CSS, optimerade alla våra tillgångar och kopierade de nödvändiga mapparna till mappen dist. För att köra den här uppgiften behöver vi bara skriva gulp build på kommandoraden.

Sist har vi en clean-uppgift som rensar bort från den genererade dist-mappen alla bildcacher som skapas, vilket gör att vi kan ta bort alla gamla filer som oavsiktligt förvarades i dist.

Vi har hittills skapat ett robust arbetsflöde som är tillräckligt kapabelt för de flesta webbutvecklare. Det finns mycket mer till Gulp och arbetsflöden som vi kan utforska för att göra den här processen ännu bättre. Här är några idéer för dig:

För utveckling:

• Använda Autoprefixer för att skriva leverantörsfri CSS-kod
• Lägga till källkartor för enklare felsökning
• Skapa sprites med sprity
• Kompilera endast filer som har ändrats med gulp-changed
• Skrivning av ES6 med Babel eller Traceur
• Modularisering av Javascript-filer med Browserify, webpack eller jspm
• Modularisering av HTML med mallmotorer som Handlebars eller Swig
• Splitning av gulpfilen i mindre filer med require-dir
• Generering av ett Modernizr-skript automatiskt med gulp-modernizr

För optimering:

• För att ta bort oanvänd CSS med unCSS
• För att optimera CSS ytterligare med CSSO
• Generera inline-CSS för prestanda med Critical

För att utveckla eller optimera processer kan du även lägga till att skriva JavaScript-enhetstester med gulp-jasmine och till och med distribuera din dist-mapp till din produktionsserver automatiskt med gulp-rync.

Som du kan se, även om arbetsflödet vi har skapat gör ganska många saker, finns det mycket mer som kan göras. Att skapa ett arbetsflöde som passar dina behov kan vara oerhört spännande och tillfredsställande, men det kan vara mycket att ta in om du är nybörjare.

Det finns så mycket mer i Gulp att det är omöjligt att täcka in det här blogginlägget, eller ens en serie inlägg. Därför har jag skrivit en bok om att automatisera ditt arbetsflöde, och jag bjuder in dig att ta del av tio kapitel gratis om du är intresserad av att ta reda på mer 🙂