Gulp voor Beginners

Gulp is een tool die je helpt met verschillende taken als het gaat om webontwikkeling. Het wordt vaak gebruikt om front-end taken uit te voeren zoals:

• Het opstarten van een webserver
• Het automatisch laden van de browser wanneer een bestand wordt opgeslagen
• Het gebruik van preprocessors zoals Sass of LESS
• Het optimaliseren van assets zoals CSS, JavaScript en afbeeldingen

Belangrijke opmerking! Dit artikel is geschreven voor Gulp 3.x, maar nu is Gulp 4.x uit en aanbevolen. Zoals elke grote versie verandering, API’s hebben brekende veranderingen. Als je Gulp 4 installeert en probeert sommige dingen in dit artikel te doen, zullen ze niet werken. We zullen er hier wat aantekeningen van maken om je eraan te herinneren. Dit ziet eruit als een vrij goede Gulp 4 starter.

Dit is geen uitgebreide lijst van dingen die Gulp kan doen. Als je gek genoeg bent, kun je zelfs een statische site generator bouwen met Gulp (ik heb het gedaan!). Dus ja, Gulp is zeer krachtig, maar je zult moeten leren hoe je Gulp moet gebruiken als je je eigen aangepaste bouwprocessen wilt maken.

Daar is dit artikel dus voor bedoeld. Het helpt je zo goed te worden met de basis van Gulp dat je kunt beginnen met het verkennen van al het andere voor jezelf.

Voordat we in het werken met Gulp duiken, laten we het hebben over waarom je Gulp zou willen gebruiken in tegenstelling tot andere soortgelijke tools.

Waarom Gulp?

Tools zoals Gulp worden vaak aangeduid als “build tools”, omdat ze tools zijn voor het uitvoeren van de taken voor het bouwen van een website. De twee populairste bouwgereedschappen op dit moment zijn Gulp en Grunt. (Chris heeft een post over aan de slag gaan met Grunt hier). Maar er zijn er natuurlijk nog meer. Broccoli richt zich op het compileren van assets, een van de meest voorkomende taken van build tools.

Er zijn al meerdere artikelen over het verschil tussen Grunt en Gulp en waarom je de een boven de ander zou gebruiken. Je kunt dit artikel, deze, of deze bekijken als je geïnteresseerd bent om meer te weten te komen. Brunch is vergelijkbaar in zijn focus op activa, en het bundelt in een aantal van de meest voorkomende andere taken, zoals een server en file watcher.

Het belangrijkste verschil is hoe je een workflow met hen configureert. Gulp configuraties hebben de neiging om veel korter en eenvoudiger te zijn in vergelijking met Grunt. Gulp heeft ook de neiging om sneller te lopen.

Laten we nu verder gaan en uitvinden hoe je een workflow met Gulp kunt instellen.

Wat we opzetten

Aan het eind van dit artikel heb je een workflow die de taken doet die we aan het begin van dit artikel hebben geschetst:

• Spint een webserver op
• Compileert Sass naar CSS
• Versverst de browser automatisch wanneer u een bestand opslaat
• Optimaliseert alle assets (CSS, JS, lettertypen en afbeeldingen) voor productie

U leert ook hoe u verschillende taken aan elkaar kunt ketenen in eenvoudige opdrachten die gemakkelijk te begrijpen en uit te voeren zijn.

Laten we beginnen met het installeren van Gulp op uw computer.

Het installeren van Gulp

U moet Node.js (Node) op uw computer hebben geïnstalleerd voordat u Gulp kunt installeren.

Als u Node nog niet hebt geïnstalleerd, kunt u het krijgen door het pakketinstallatieprogramma te downloaden van de website van Node.

Wanneer je klaar bent met het installeren van Node, kun je Gulp installeren met het volgende commando in de opdrachtregel:

$ sudo npm install gulp -g

Note: Alleen Mac gebruikers hebben het sudo keyword nodig. (Zie de eerste opmerking van Pawel Grzybek als je sudo niet wil gebruiken). En onthoud dat de “$” in de code hierboven alleen de command prompt symboliseert. Dat is niet echt onderdeel van het commando dat je uitvoert.

Het npm install commando dat we hier hebben gebruikt, is een commando dat Node Package Manager (npm) gebruikt om Gulp op je computer te installeren.

De -g vlag in dit commando vertelt npm om Gulp globaal op uw computer te installeren, waardoor u het gulp commando overal op uw systeem kunt gebruiken.

Mac-gebruikers hebben het extra sudo sleutelwoord in de opdracht nodig omdat ze beheerdersrechten nodig hebben om Gulp globaal te installeren.

Nu dat u Gulp hebt geïnstalleerd, laten we een project maken dat Gulp gebruikt.

Een Gulp Project

Maken we eerst een map genaamd project om te serveren als onze project root als we verder gaan met deze tutorial. Voer het npm init commando uit vanuit die map:

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

Het npm init commando creëert een package.json bestand voor uw project dat informatie over het project opslaat, zoals de afhankelijkheden die in het project worden gebruikt (Gulp is een voorbeeld van een afhankelijkheid).

npm init zal u vragen:

Als het package.json-bestand is gemaakt, kunnen we Gulp in het project installeren met het volgende commando:

$ npm install gulp --save-dev

Deze keer installeren we Gulp in project in plaats van het globaal te installeren, daarom zijn er enkele verschillen in het commando.

U zult zien dat het sudo sleutelwoord niet nodig is omdat we Gulp niet globaal installeren, dus -g is ook niet nodig. We hebben --save-dev toegevoegd, wat de computer vertelt om gulp toe te voegen als een dev afhankelijkheid in package.json.

Als u de projectmap bekijkt wanneer het commando klaar is met uitvoeren, moet u zien dat Gulp een node_modules map heeft gemaakt. U zou ook een gulp-map moeten zien binnen node_modules.

We zijn bijna klaar om met Gulp aan de slag te gaan. Voordat we dat doen, moeten we duidelijk zijn over hoe we Gulp gaan gebruiken voor het project, en een deel daarvan is het beslissen over een mappenstructuur.

Mappenstructuur bepalen

Gulp is flexibel genoeg om met elke mappenstructuur te werken. Je moet alleen de innerlijke werking begrijpen voordat je het aanpast voor je project.

Voor dit artikel gebruiken we de structuur van een generieke webapp:

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

In deze structuur gebruiken we de app map voor ontwikkelingsdoeleinden, terwijl de dist (als in “distributie”) map wordt gebruikt om geoptimaliseerde bestanden voor de productie-site te bevatten.

Omdat app wordt gebruikt voor ontwikkelingsdoeleinden, zal al onze code in app worden geplaatst.

We zullen deze map structuur in gedachten moeten houden als we werken aan onze Gulp configuraties. Laten we nu beginnen met het maken van uw eerste Gulp taak in gulpfile.js, die alle Gulp configuraties opslaat.

Schrijven van uw eerste Gulp taak

De eerste stap om Gulp te gebruiken is om require het in de gulpfile.

var gulp = require('gulp');

Het require statement vertelt Node om in de node_modules map te zoeken naar een pakket met de naam gulp. Zodra het pakket is gevonden, wijzen we de inhoud toe aan de variabele gulp.

We kunnen nu beginnen met het schrijven van een gulp taak met deze gulp variabele. De basis syntaxis van een gulp taak is:

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

task-name verwijst naar de naam van de taak, die zou worden gebruikt wanneer u een taak in Gulp wilt uitvoeren. U kunt dezelfde taak ook in de opdrachtregel uitvoeren door gulp task-name te schrijven.

Om het uit te testen, laten we een hello taak maken die Hello Zell! zegt.

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

We kunnen deze taak uitvoeren met gulp hello in de commandoregel.

$ gulp hello

De opdrachtregel zal een logboek opleveren dat Hello Zell! zegt.

Gulp-taken zijn meestal wat complexer dan dit. Het bevat meestal twee extra Gulp-methoden, plus een verscheidenheid aan Gulp-plugins.

Hier ziet u hoe een echte taak eruit kan zien:

Zoals u kunt zien, bevat een echte taak twee extra Gulp-methoden – gulp.src en gulp.dest.

gulp.src vertelt de Gulp-taak welke bestanden te gebruiken voor de taak, terwijl gulp.dest vertelt Gulp waar de bestanden moeten worden uitgevoerd zodra de taak is voltooid.

Laten we eens proberen een echte taak te bouwen waar we Sass-bestanden compileren in CSS-bestanden.

Voorbewerking met Gulp

We kunnen Sass naar CSS compileren in Gulp met de hulp van een plugin genaamd gulp-sass. U kunt gulp-sass in uw project installeren door het npm install commando te gebruiken zoals we deden voor gulp.

We zouden ook de --save-dev vlag willen gebruiken om ervoor te zorgen dat gulp-sass wordt toegevoegd aan devDependencies in package.json.

$ npm install gulp-sass --save-dev

We moeten require gulp-sass uit de node_modules map halen, net zoals we deden met gulp voordat we de plugin kunnen gebruiken.

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

We kunnen gulp-sass gebruiken door aGulpPlugin() te vervangen door sass(). Omdat de taak bedoeld is om Sass in CSS te compileren, noemen we het sass.

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

We moeten de sass taak voorzien van bron bestanden en een bestemming om de taak te laten werken, dus laten we een styles.scss bestand maken in de app/scss map. Dit bestand zal worden toegevoegd aan de sass taak in gulp.src.

We willen het uiteindelijke styles.css bestand uitvoeren naar de `app/css` map, dat zou de destination voor gulp.dest zijn.

We willen testen of de sass taak werkt zoals we willen. Om dat te doen, kunnen we een Sass functie toevoegen binnen styles.scss.

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

Als u gulp sass in de opdrachtregel uitvoert, zou u nu moeten kunnen zien dat er een styles.css bestand is aangemaakt in app/css. Bovendien heeft het de code waar percentage(5/7) werd geëvalueerd in 71.42857%.

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

Daarmee weten we dat de sass taak werkt!

Soms hebben we de mogelijkheid nodig om meer dan één .scss bestand tegelijk in CSS te compileren. We kunnen dat doen met behulp van Node globs.

Globbing in Node

Globs zijn overeenkomende patronen voor bestanden die u toestaan om meer dan één bestand in gulp.src toe te voegen. Het is net als reguliere expressies, maar dan specifiek voor bestandspaden.

Wanneer u een glob gebruikt, controleert de computer bestandsnamen en -paden op het opgegeven patroon. Als het patroon bestaat, dan wordt een bestand gematched.

De meeste workflows met Gulp hebben maar 4 verschillende globbing-patronen nodig:

1. *.scss: Het * patroon is een wildcard dat overeenkomt met elk patroon in de huidige directory. In dit geval komen we overeen met alle bestanden die eindigen op .scss in de hoofdmap (project).
2. **/*.scss: Dit is een extremere versie van het * patroon dat overeenkomt met elk bestand dat eindigt op .scss in de hoofdmap en alle onderliggende mappen.
3. !not-me.scss: De ! geeft aan dat Gulp het patroon moet uitsluiten van zijn overeenkomsten, wat handig is als je een bestand moest uitsluiten van een overeenkomend patroon. In dit geval zou not-me.scss worden uitgesloten van de match.
4. *.+(scss|sass): De plus + en haakjes () stelt Gulp in staat om meerdere patronen te matchen, met verschillende patronen gescheiden door het pipe | karakter. In dit geval zal Gulp elk bestand dat eindigt op .scss of .sass in de hoofdmap matchen.

Elk ander Sass bestand dat wordt gevonden binnen app/scss zou automatisch worden opgenomen in de sass taak met deze wijziging. Als u een print.scss bestand toevoegt aan het project, zult u zien dat print.css zal worden gegenereerd in app/css.

We zijn er nu in geslaagd om alle Sass bestanden te compileren in CSS bestanden met een enkele opdracht. De vraag is echter wat we eraan hebben als we gulp sass elke keer handmatig moeten uitvoeren als we Sass in CSS willen compileren.

Gelukkig kunnen we Gulp vertellen om automatisch de sass taak uit te voeren wanneer een bestand wordt opgeslagen via een proces genaamd “watching”.

Sass bestanden bekijken op wijzigingen

Note! Gulp Watch was een van de dingen die veel veranderde van 3.x naar 4.x. Zie de docs.

Gulp voorziet ons van een watch methode die controleert of een bestand is opgeslagen. De syntax voor de watch methode is:

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

Maar vaker zullen we meer dan een type bestand tegelijk willen bekijken. Om dit te doen, kunnen we meerdere watch processen groeperen in een watch taak:

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

Als u nu het gulp watch commando zou uitvoeren, zult u zien dat Gulp onmiddellijk begint te kijken.

En dat het automatisch de sass taak uitvoert wanneer u een .scss bestand opslaat.

Laten we een stap verder gaan en Gulp de browser laten herladen wanneer we een .scss bestand opslaan met behulp van Browser Sync.

Live-reloading met Browser Sync

Browser Sync helpt webontwikkeling eenvoudiger te maken door een webserver op te starten die ons helpt om gemakkelijk live-reloading uit te voeren. Het heeft ook andere functies, zoals het synchroniseren van acties over meerdere apparaten.

We zullen eerst Browser Sync moeten installeren:

$ npm install browser-sync --save-dev

Het is je misschien opgevallen dat er geen gulp- voorvoegsel is wanneer we Browser Sync installeren. Dit is omdat Browser Sync werkt met Gulp, dus we hoeven geen plugin te gebruiken.

Om Browser Sync te gebruiken, moeten we require Browser Sync.

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

We moeten een browserSync taak maken om Gulp in staat te stellen om een server op te starten met behulp van Browser Sync. Omdat we een server draaien, moeten we Browser Sync laten weten waar de root van de server moet zijn. In ons geval is dat de `app` map:

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

We moeten ook onze sass taak iets aanpassen, zodat Browser Sync nieuwe CSS stijlen kan injecteren (de CSS bijwerken) in de browser wanneer de sass taak wordt uitgevoerd.

We zijn klaar met het configureren van Browser Sync. Nu moeten we de watch en browserSync taken tegelijk uitvoeren om live-reloading te laten plaatsvinden.

Het zal omslachtig zijn om twee command line vensters te openen en gulp browserSync en gulp watch afzonderlijk uit te voeren, dus laten we Gulp ze samen uitvoeren door de watch taak te vertellen dat browserSync moet worden voltooid voordat watch is toegestaan om uit te voeren.

Dit kunnen we doen door een tweede argument toe te voegen aan de watch taak. De syntaxis is:

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

En in dit geval voegen we de browserSync taak toe.

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

We willen er ook voor zorgen dat sass voor watch komt, zodat de CSS al de laatste zal zijn wanneer we een Gulp commando uitvoeren.

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

Nu, als u gulp watch in de opdrachtregel uitvoert, zou Gulp zowel de sass als browserSync taken tegelijkertijd moeten starten. Wanneer beide taken zijn voltooid, zal watch worden uitgevoerd.

Tegelijkertijd zou er ook een browservenster moeten verschijnen dat naar app/index.html wijst. Als u het styles.scss bestand wijzigt, zult u zien dat de browser automatisch herlaadt.

Er is nog één ding voordat we dit gedeelte over live-reloaden afsluiten. Aangezien we al kijken naar .scss-bestanden om te herladen, waarom gaan we niet een stap verder en herladen de browser als een HTML- of JavaScript-bestand wordt opgeslagen?

Dit kunnen we doen door nog twee watch processen toe te voegen, en de browserSync.reload functie aan te roepen als een bestand wordt opgeslagen:

Tot nu toe hebben we in deze tutorial voor drie dingen gezorgd:

1. Een webserver opstarten voor ontwikkeling
2. De Sass preprocessor gebruiken
3. De browser herladen wanneer een bestand wordt opgeslagen

Laten we het deel over het optimaliseren van assets in de volgende sectie behandelen. We beginnen met het optimaliseren van CSS en JavaScript bestanden.

Het optimaliseren van CSS en JavaScript bestanden

De ontwikkelaars hebben twee taken uit te voeren wanneer we CSS en JavaScript bestanden proberen te optimaliseren voor productie: minification en concatenation.

Eén probleem waar ontwikkelaars tegenaan lopen als ze dit proces automatiseren, is dat het moeilijk is om je scripts in de juiste volgorde aan elkaar te plakken.

Zeg dat we 3 script-tags hebben opgenomen in index.html.

Deze scripts bevinden zich in twee verschillende mappen. Het zal moeilijk zijn om ze aan elkaar te plakken met traditionele plugins zoals gulp-concatenate.

Gelukkig is er een handige Gulp plugin, gulp-useref die dit probleem oplost.

Gulp-useref voegt een willekeurig aantal CSS- en JavaScript-bestanden samen tot een enkel bestand door te zoeken naar een commentaar dat begint met “<!-build:” en eindigt met “<!-endbuild->”. De syntaxis is:

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

<type> kan ofwel js, css, of remove zijn. Het is het beste om type in te stellen op het bestandstype dat u probeert samen te voegen. Als u type instelt op remove, verwijdert Gulp de hele bouwsteen zonder een bestand te genereren.

<path> verwijst hier naar het doelpad van het gegenereerde bestand.

We willen dat het uiteindelijke JavaScript-bestand wordt gegenereerd in de map js, als main.min.js. Dus, de opmaak zou zijn:

Nu gaan we de gulp-useref plugin configureren in de gulpfile. We moeten de plugin installeren en het vereisen in de gulpfile.

$ npm install gulp-useref --save-dev

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

Het opzetten van de useref taak is vergelijkbaar met de andere taken die we tot nu toe hebben gedaan. Hier is de code:

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

Als u nu deze useref-taak uitvoert, zal Gulp de 3 scripttags doorlopen en ze samenvoegen tot dist/js/main.min.js.

Het bestand is op dit moment echter niet geminificeerd. We zullen de gulp-uglify plugin moeten gebruiken om te helpen met het minifiëren van JavaScript bestanden. We hebben ook een tweede plugin nodig, genaamd gulp-if, om ervoor te zorgen dat we alleen JavaScript-bestanden proberen te minifiëren.

$ npm install gulp-uglify --save-dev 

Gulp zou nu automatisch het `main.min.js` bestand moeten minifieren wanneer je de useref taak uitvoert.

Een leuk ding dat ik nog moet onthullen met Gulp-useref is dat het automatisch alle scripts binnen “<!-build:” en “<!-endbuild->” verandert in een enkel JavaScript bestand dat verwijst naar `js/main.min.js`.

Wonderlijk, nietwaar?

We kunnen dezelfde methode gebruiken om CSS-bestanden aan elkaar te plakken (als u hebt besloten er meer dan één toe te voegen). We volgen hetzelfde proces en voegen een build commentaar toe.

We kunnen het samengevoegde CSS bestand ook minifiëren. We moeten een pakket genaamd gulp-cssnano plugin gebruiken om ons te helpen met minificatie.

$ npm install gulp-cssnano

Nu krijg je een geoptimaliseerd CSS bestand en een geoptimaliseerd JavaScript bestand wanneer je de useref taak uitvoert.

Laten we nu verder gaan met het optimaliseren van afbeeldingen.

Afbeeldingen optimaliseren

U hebt het waarschijnlijk al geraden; we moeten gulp-imagemin gebruiken om ons te helpen met het optimaliseren van afbeeldingen.

$ npm install gulp-imagemin --save-dev

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

We kunnen png, jpg, gif en zelfs svg minifiëren met de hulp van gulp-imagemin. Laten we een images taak maken voor dit optimalisatie proces.

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

Omdat verschillende bestandstypen verschillend kunnen worden geoptimaliseerd, wilt u misschien opties toevoegen aan imagemin om aan te passen hoe elk bestand wordt geoptimaliseerd.

U kunt bijvoorbeeld interlaced GIF’s maken door de interlaced optietoets op true te zetten.

U kunt ook met andere opties spelen als u dat wilt.

Het optimaliseren van afbeeldingen is echter een uiterst traag proces dat je niet wilt herhalen, tenzij het noodzakelijk is. Om dit te doen, kunnen we de gulp-cache plugin gebruiken.

$ npm install gulp-cache --save-dev

We zijn bijna klaar met het optimalisatie proces. Er is nog een map die we moeten verplaatsen van de `app` directory naar `dist`, de fonts directory. Laten we dat nu doen.

Lettertypen kopiëren naar Dist

Omdat de lettertype bestanden al geoptimaliseerd zijn, hoeven we niets meer te doen. Het enige wat we hoeven te doen is de lettertypes te kopiëren naar dist.

We kunnen bestanden kopiëren met Gulp door simpelweg gulp.src en gulp.dest op te geven zonder plugins.

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

Nu zal Gulp `fonts` van `app` naar `dist` kopiëren wanneer je gulp fonts uitvoert.

We hebben nu 6 verschillende taken in het gulp-bestand, en elk van hen moet afzonderlijk worden aangeroepen met de opdrachtregel, wat nogal omslachtig is, dus we willen alles samenbrengen in één opdracht.

Voordat we dat doen, laten we eens kijken hoe we automatisch gegenereerde bestanden kunnen opruimen.

Automatisch opruimen van gegenereerde bestanden

Omdat we automatisch bestanden genereren, willen we er zeker van zijn dat bestanden die niet meer gebruikt worden, niet ergens blijven zonder dat wij het weten.

Dit proces heet opschonen (of eenvoudiger gezegd, bestanden verwijderen).

We zullen del moeten gebruiken om ons bij het opschonen te helpen.

npm install del --save-dev

var del = require('del');

De del functie neemt een array van node globs in die het vertelt welke mappen te verwijderen.

Het opzetten met een Gulp taak is bijna als het eerste “hello” voorbeeld dat we hadden.

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

Nu zal Gulp de `dist` map voor je verwijderen wanneer gulp clean:dist wordt uitgevoerd.

Note: We hoeven ons geen zorgen te maken over het verwijderen van de dist/images map, omdat gulp-cache de caches van de afbeeldingen al heeft opgeslagen op uw lokale systeem.

Om de caches van uw lokale systeem te wissen, kunt u een aparte taak maken met de naam `cache:clear`

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

Foeh, dat is een mondvol. Laten we nu al onze taken samenvoegen!

Gulp taken combineren

Laten we eens samenvatten wat we hebben gedaan. Tot nu toe hebben we twee verschillende sets van Gulp taken gemaakt.

De eerste set is voor een ontwikkelingsproces, waar we Sass naar CSS compileerden, op veranderingen letten, en de browser dienovereenkomstig herlaadden.

De tweede set is voor een optimalisatie proces, waar we alle bestanden klaar voor de productie website. We hebben activa zoals CSS, JavaScript, en beelden in dit proces geoptimaliseerd en lettertypen overgekopieerd van app naar dist.

We hebben de eerste set taken al gegroepeerd in een eenvoudige workflow met het gulp watch commando:

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

De tweede set bestaat uit taken die we moeten uitvoeren om de productie website te maken. Dit omvat clean:dist, sass, useref, images en fonts.

Als we dezelfde gedachtengang zouden volgen, zouden we een build taak kunnen maken om alles samen te voegen.

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

Helaas, we zouden niet in staat zijn om de build taak op deze manier te schrijven, omdat Gulp alle taken in het tweede argument tegelijkertijd activeert.

Er is een mogelijkheid dat useref, images, of zelfs fonts wordt voltooid voordat clean dat doet, wat betekent dat de hele `dist` map wordt verwijderd.

Om er zeker van te zijn dat cleans eerder worden voltooid dan de rest van de taken, moeten we een extra plugin gebruiken genaamd Run Sequence.

$ npm install run-sequence --save-dev

Hier volgt de syntax van een taaksequentie met run sequence:

Wanneer task-name wordt aangeroepen, zal Gulp eerst task-one uitvoeren. Wanneer task-one klaar is, zal Gulp automatisch task-two starten. Tenslotte, wanneer task-two klaar is, zal Gulp task-three uitvoeren.

Run Sequence staat u ook toe om taken gelijktijdig uit te voeren als u ze in een array plaatst:

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

In dit geval voert Gulp eerst task-one uit. Wanneer task-one is voltooid, voert Gulp elke taak in het tweede argument tegelijkertijd uit. Alle taken in dit tweede argument moeten zijn voltooid voordat task-three wordt uitgevoerd.

Dus we kunnen nu een taak maken die ervoor zorgt dat clean:dist eerst wordt uitgevoerd, gevolgd door alle andere taken:

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

Om dingen consistent te maken, kunnen we ook dezelfde volgorde bouwen met de eerste groep. Laten we deze keer default gebruiken als de naam van de taak:

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

Waarom default? Omdat wanneer u een taak hebt met de naam default, u deze eenvoudig kunt uitvoeren door het gulp commando te typen, wat een aantal toetsaanslagen bespaart.

Finitief, hier is een github repo voor al het werk dat we hebben gedaan!

Wrapping it up

We hebben de absolute basis van Gulp doorgenomen en een workflow gemaakt die in staat is om Sass in CSS te compileren terwijl HTML en JS bestanden tegelijkertijd op wijzigingen worden gecontroleerd. We kunnen deze taak uitvoeren met het gulp commando in de commandoregel.

We hebben ook een tweede taak gebouwd, build, die een dist map maakt voor de productie website. We hebben Sass gecompileerd in CSS, al onze assets geoptimaliseerd, en de benodigde mappen gekopieerd naar de dist map. Om deze taak uit te voeren, hoeven we alleen maar gulp build in de commandoregel te typen.

Ten slotte hebben we een clean taak die uit de gegenereerde dist map alle gecreëerde image caches opruimt, zodat we alle oude bestanden kunnen verwijderen die per ongeluk in dist werden bewaard.

We hebben tot nu toe een robuuste workflow gemaakt die capabel genoeg is voor de meeste web ontwikkelaars. Er is nog veel meer in Gulp en workflows dat we kunnen onderzoeken om dit proces nog beter te maken. Hier zijn wat ideeën voor je:

Voor ontwikkeling:

• Autoprefixer gebruiken om vendor-free CSS code te schrijven
• Sourcemaps toevoegen om makkelijker te kunnen debuggen
• Sprites maken met sprity
• Alleen bestanden compileren die veranderd zijn met gulp-changed
• Ess6 schrijven met Babel of Traceur
• Modulariseren van Javascript bestanden met Browserify, webpack, of jspm
• Het modulariseren van HTML met template engines zoals Handlebars of Swig
• Het splitsen van de gulpfile in kleinere bestanden met require-dir
• Het automatisch genereren van een Modernizr script met gulp-modernizr

Voor optimalisatie:

• Het verwijderen van ongebruikte CSS met unCSS
• Het verder optimaliseren van CSS met CSSO
• Het genereren van inline CSS voor performance met Critical

Naast ontwikkeling of optimalisatie processen, kunt u ook JavaScript unit tests schrijven met gulp-jasmine en zelfs uw dist map automatisch deployen op uw productie server met gulp-rync.

Zoals u kunt zien, hoewel de workflow die we hebben gemaakt een flink aantal dingen doet, is er veel meer dat kan worden gedaan. Het maken van een workflow die aan je behoeften voldoet, kan erg opwindend en bevredigend zijn, maar het kan ook veel zijn om te verwerken als je hier nieuw in bent.

Er is zoveel meer met Gulp dat het onmogelijk is om het in deze blog post te behandelen, of zelfs in een serie van posts. Daarom heb ik een boek geschreven over het automatiseren van je workflow, en ik nodig je uit om tien hoofdstukken gratis mee te nemen als je geïnteresseerd bent om meer te weten te komen 🙂