Aan de slag met Gulp.js

Gulp is een Javascript-gebaseerde tool waarmee je delen van je workflow kunt automatiseren. Automatisering kan u letterlijk uren per dag besparen. Of je nu een ontwikkelaar bent of een ontwerper die af en toe HTML-wireframes maakt, ik moedig je aan om in te graven.

In dit artikel zullen we de basis van het gebruik van Gulp bekijken - van installatie tot basissyntaxis en een paar voorbeelden. Aan het einde van het artikel zou je dit moeten kunnen vind, installeer en gebruik pakketten die anderen hebben gemaakt voor Gulp om SASS te compileren, afbeeldingen te optimaliseren, sprites te maken, bestanden samen te voegen en meer!

Gulp installeren

Maak je geen zorgen, de installatie is heel eenvoudig. We zullen de terminal moeten gebruiken in OSX en Linux, of de opdrachtprompt voor Windows. Ik zal het vanaf nu als Terminal noemen.

Open het en typ npm -v en druk op enter. Als het versienummer wordt weergegeven, is het knooppunt al geïnstalleerd - dit is een afhankelijkheid voor Gulp.

Als je een krijgt “opdracht niet gevonden” (of een vergelijkbare fout), ga naar de downloadpagina van Node.js en selecteer het juiste pakket voor uw systeem. Na de installatie is de opdracht npm beschikbaar in de terminal.

Gulp installeren is net zo eenvoudig. Plak de volgende opdracht in de terminal, dat is het:

npm installeren - mondiale slok

Hiermee wordt de Gulp-opdracht geïnstalleerd die algemeen beschikbaar is op uw systeem.

Gulp aan een project toevoegen

Gulp is nu geïnstalleerd, maar we moeten het voor elk project waaraan we het nodig hebben, apart toevoegen. Maak nu een lege map en navigeer ernaar in uw terminal. Gebruik in de map voor het project de volgende opdracht:

npm install --save-dev gulp

Dit zou een map node_modules en een bestand npm-debug.log in uw projectmap moeten maken. Deze worden door Gulp gebruikt om zijn ding aan uw project te doen, u hoeft hier niet over na te denken.

De reden dat we Gulp aan elk specifiek project moeten toevoegen, is dat elk project heeft andere vereisten. Men kan bellen voor SASS, een andere voor Less. Men kan Coffeescript gebruiken, de andere mag dat niet, enzovoort.

The Gulpfile

De Gulpfile is waar de magie gebeurt, het is waar je definieert de automatiseringen die u nodig heeft en wanneer je wilt dat ze gebeuren. Laten we een lege standaardtaak maken door een bestand met de naam te maken gulpfile.js en de volgende code erin plakken.

var gulp = vereisen ('gulp'); gulp.task ('default', function () // Dit doet niets voor nu, we zullen binnenkort functionaliteit toevoegen);

Nadat dit bestand is opgeslagen, kunt u teruggaan naar uw terminal en zelfstandig het slikopdracht uitvoeren. Gulp detecteert in welk project het zich bevindt en voert de standaardtaak uit - degene die we zojuist hebben gemaakt. Je zou zoiets als dit moeten zien:

Er gebeurt hier niets, omdat de taak leeg is, maar het werkt prima. Laten we beginnen met een paar goede voorbeelden!

Een bestand kopiëren

Dit is een saaie, ik geef het toe, maar het zal je helpen begrijpen wat er gemakkelijk aan de hand is.

Maak in je projectmap een bestand met de naam to_copy.txt , en een map met de naam dev. Laten we naar onze Gulpfile gaan en een nieuwe taak met de naam creëren kopiëren.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

De eerste regel definieert een taak met de naam copy. Hierin gebruiken we gulp.src om aan te geven welke bestanden we met deze taak targeten - in dit geval is het een enkel bestand met de naam to_copy.txt.

Vervolgens pipen we deze bestanden naar de functie gulp.dest die aangeeft waar we deze bestanden willen plaatsen - ik heb de dev-map gebruikt.

Ga terug naar je terminal en typ gulp kopiëren om deze taak uit te voeren, zou het het gespecificeerde bestand naar de gespecificeerde map moeten kopiëren, iets als dit:

Het pijpcommando vormt de kern van Gulp. Het is een efficiënte manier om gegevens tussen opdrachten te verplaatsen. Met de opdracht src geeft u de bestanden op die worden doorgestuurd naar de opdracht dest. In complexere scenario's zouden we onze bestanden naar andere commando's leiden voordat we een bestemming opgeven.

Houd er ook rekening mee dat de bron kan worden gegeven als een enkel bestand of meerdere bestanden. Als we een map hebben met de naam productie en we willen alle bestanden van ons verplaatsen ontwikkeling map erin, kunnen we de volgende opdracht gebruiken:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Het sterretje komt overeen met alles in de map. Je zou ook alle bestanden in alle submappen kunnen matchen en allerlei andere mooie overeenkomsten kunnen doen. Bekijk de node-glob documentatie voor meer informatie.

SASS compileren

Het samenstellen van een stylesheet uit SASS-bestanden is een veelvoorkomende taak voor ontwikkelaars. Het kan vrij gemakkelijk met Gulp gedaan worden, we moeten echter wel wat voorbereiding doen. Afgezien van basisopdrachten zoals src, dest en een aantal andere, wordt alle functionaliteit toegevoegd via externe add-ons. Hier is hoe ik ze ga gebruiken.

ik typ SASS Gulp bij Google, het eerste resultaat is meestal wat ik nodig heb, u zou de pagina voor het SASS-pakket moeten vinden. Het laat zien hoe je het installeert (npm install gulp-sass). De kans is groot dat je sudo moet gebruiken om het als een beheerder te installeren, dus het zal waarschijnlijk zijn (sudo npm install gulp-sass) .

Als u klaar bent, kunt u de syntaxis gebruiken die het pakket aangeeft om uw code te compileren. Hiertoe maakt u een bestand met de naam styles.scss met de volgende inhoud:

$ primair: # ff9900; body background: $ primary; 

Maak nu de volgende Gulp-taak in het Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Voordat je het commando uitvoert, vergeet niet om het pakket bovenaan het Gulpfile als volgt te 'vereisen':

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

Wanneer je rent slok, alle bestanden met de scss-extensie worden doorgestuurd naar de sass-functie, die ze naar css zal converteren. Deze worden vervolgens doorgestuurd naar de bestemmingsfunctie die ze in de css-map plaatst.

Kijken naar bestanden en mappen

Tot nu toe is dit allemaal handig, maar we moeten nog steeds een opdracht typen elke keer we willen een taak uitvoeren, die niet erg efficiënt is, vooral als het gaat om wijzigingen in stylesheets. Met Gulp kunt u bestanden bekijken op wijzigingen en opdrachten automatisch uitvoeren.

Maak in de Gulpfile een opdracht met de naam automatiseren die de watch-opdracht gebruikt om een ​​reeks bestanden te bekijken voor wijzigingen en een specifieke opdracht uitvoert wanneer een bestand verandert.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Als je typt gulp automatiseren in de terminal, het zal beginnen en de taak beëindigen, maar het zal niet terugkeren naar de prompt omdat het controleert op veranderingen. We hebben aangegeven dat we alle scss-bestanden in de hoofdmap willen bekijken en als ze veranderen, willen we de sass-opdracht uitvoeren die we eerder hebben ingesteld.

Als u nu uw styles.scss-bestand wijzigt, moet het automatisch worden gecompileerd naar het css-bestand in de css-directory.

Meerdere taken uitvoeren

Er zijn veel situaties waarin u meerdere taken wilt uitvoeren. Wanneer u uw javascript-map bekijkt, wilt u mogelijk twee bestanden samenvoegen en vervolgens verder gaan om ze te verkleinen. Er zijn twee manieren om dit voor elkaar te krijgen.

Als taken gerelateerd zijn, vind ik het leuk om te doen keten ze. Een goed voorbeeld is de aaneenschakeling en verkleining van JavaScript-bestanden. We pipen eerst onze bestanden naar de concat-actie, pipen ze dan om te lummelen en gebruiken dan de bestemmingsfunctie om ze uit te voeren.

Als taken geen verband houden, zou dat kunnen bel meerdere taken. Een voorbeeld zou een taak zijn waarbij we onze scripts aaneenschakelen en verkleinen en ook onze SASS compileren. Hier is hij volledig Gulpfile van hoe dat eruit zou zien.

var gulp = vereisen ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('standaard', ['scripts', 'stijlen']);

Als je typt gulp-scripts in de terminal worden alle javascript-bestanden in de js-directory samengevoegd, uitgevoerd naar de hoofddirectory, vervolgens uitgepakt en opgeslagen in de hoofddirectory.

Als je typt slok, al uw scss-bestanden worden gecompileerd en opgeslagen in de css-directory.

Als je typt slok (de standaardtaak), jouw scripts taak wordt uitgevoerd, gevolgd door uw stijlen taak.

De gulp automatiseren taak kijkt naar meerdere mappen voor wijzigingen in onze scss- en js-bestanden en voert beide taken uit die we hebben gedefinieerd, als een verandering wordt gedetecteerd.

Overzicht

Het gebruik van Gulp is niet moeilijk, in feite geven veel mensen er de voorkeur aan boven Grunt vanwege de eenvoudiger syntaxis. Denk aan de stappen die u moet nemen bij het maken van een nieuwe automatisering:

• Zoeken naar plug-in
• Installeer plugin
• Vereist plugin in uw Gulpfile
• Gebruik de syntaxis in de documentatie

De vijf beschikbare commando's in Gulp (taak, run, watch, src, dest) zijn de enige die je moet weten, alle externe add-ons hebben geweldige documentatie. Hier is een lijst met een aantal dingen die ik gebruik waarmee je nu al aan de slag kunt:

• Afbeeldingen optimaliseren met gulp-afbeelding-optimalisatie
• Het creëren van beeldsprites met gulp-sprite
• Bestanden samenvoegen met gulp-concat
• Het verkleinen van bestanden met gulp-uglify
• Bestanden verwijderen met gulp-del
• Pluizen van Javascript met gulp-jslint
• JSON pluist met gulp-jonolint
• Autoprefix CSS met gulp-autoprefixer
• Zoeken en vervangen met gulp-frep
• Verklein CSS met gulp-minify-css