Share
De voordelen van taaklopers bij softwareontwikkeling liggen voor de hand. Ze helpen bij het automatiseren van veelvoorkomende, vaak vervelende taken en laten u zich volledig richten op belangrijkere zaken, zoals het schrijven van geweldige code. Serieus, de mogelijkheid om taken zoals beeldcompressie, minificatie, unit-testen en nog veel meer te automatiseren, is een enorme tijdbesparing.
Voor veel front-end ontwikkelaars was de goto taakrunner tot nu toe Grunt, waarmee je je taken kon definiëren met JavaScript in een bestand genaamd Gruntfile.js (AKA a Gruntfile). Kortom, als je JavaScript kende, was het opzetten van een Grunt-taak een vrij eenvoudig proces en de breedte van externe plug-ins voor andere tools zoals JSHint, Sass en Uglify maakt het een van de meest flexibele tools beschikbaar.
Grunt is voor het grootste deel de favoriete taak geweest, maar onlangs heeft een nieuwe met de naam Gulp.js veel aandacht gekregen vanwege het eenvoudige installatiegemak en het ongelooflijk eenvoudige configuratiebestandsformaat, waardoor het gemakkelijk leesbaar en beheersbaar is.
In deze tutorial laat ik je zien hoe je Gulp kunt installeren en een eenvoudig configuratiebestand kunt maken om je voeten nat te maken met deze geweldige nieuwe taakloper.
Gulp.js is een Node-gebaseerde taskrunner net als Grunt en als zodanig moet Node.js zijn geïnstalleerd om het te gebruiken. Dit kan op verschillende manieren worden gedaan, vooral afhankelijk van uw besturingssysteem. Omdat ik in OS X zat, koos ik ervoor om nvm te gebruiken, het geweldige script van Tim Caswell voor het beheren van meerdere versies van Node.js. Je kunt de binaries ook rechtstreeks downloaden van de Node.js-site. Als je helemaal nieuw bent bij Node.js, bekijk dan zeker de Nettuts + -serie over het up-to-speed zijn op Node.js.
Gulp.js wordt geleverd als een knooppuntmodule waardoor het ongelofelijk gemakkelijk te installeren is met behulp van npm (Node Package Manager). Om Gulp te installeren, open je je terminal en typ je het volgende:
npm install -g gulp
Dit trekt Gulp uit de NPM register en configureert het globaal op uw systeem, zodat u toegang hebt via de opdrachtregel.
In alle opzichten is Gulp.js op dit moment geïnstalleerd en bent u klaar om het te gebruiken met uw projecten.
Om Gulp in uw project te gebruiken, zijn er een paar belangrijke dingen die gedaan moeten worden:
Deze stappen moeten worden uitgevoerd in de map van uw project, zodat de pakketten en configuratiebestanden beschikbaar zijn voor Gulp.
Laten we eerst de afhankelijkheden installeren:
npm install --save-dev gulp gulp-util
Nu moeten we de Gulp-plug-ins installeren die de taken uitvoeren die we in ons configuratiebestand definiëren. Deze plug-ins zijn ook Node-pakketmodules, dus we zullen gebruiken NPM opnieuw om ze te installeren.
npm install --save-dev gulp-uglify gulp-concat
In mijn geval installeer ik twee plug-ins waarmee ik mijn JavaScript-code kan verkleinen / comprimeren met de Uglify.js-compressor en al mijn JavaScipt-bestanden samenvoegen tot één bronbestand.
Merk op dat ik de --save-dev flag voor het installeren van de Gulp-afhankelijkheden en de plug-ins die ik nodig heb voor mijn project. Dit zorgt ervoor dat een vermelding voor elke wordt gemaakt naar mijn devDependencies-lijst in mijn package.json bestand als dit:
"devDependencies": "gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify": "~ 0.2.0", "gulp-concat": " ~ 2.1.7 "
Dit zorgt ervoor dat eventuele pakketafhankelijkheden voor dit project later eenvoudig kunnen worden geïnstalleerd met behulp van npm. Als je geen hebt package.json bestand in uw project, typ gewoon in npm init op de opdrachtregel of open een nieuw bestand in uw editor, voeg accolades openen en sluiten toe en sla het op als "package.json". Herhaal dan de NPM bovenstaande commando's om het bij te werken. Merk op dat het toevoegen van accolades nodig is. Anders, wanneer u probeert het te gebruiken --save-dev vlag, NPM zal een foutmelding geven dat het geen geldig JSON-bestand is.
Hoewel ik slechts twee plug-ins gebruik voor mijn zelfstudie, biedt Gulp meer dan 200 plug-ins voor alle soorten functionaliteit, waaronder:
en nog veel meer.
Net als Grunt heeft Gulp een naambestanden-configuratiebestand genaamd gulpfile.js die alle vereiste plug-ins definieert, samen met de taken die u zult uitvoeren. U moet een bestand maken dat naar de hoofdmap van uw projectmap wordt geroepen.
De syntaxis is eenvoudig en bondig waardoor hij heel leesbaar en gemakkelijk te begrijpen is:
Accentsconagua
var gulp = vereisen ('gulp'), gutil = vereisen ('gulp-util'), uglify = require ('gulp-uglify'), concat = require ('gulp-concat'); Dit vertelt Gulp eenvoudig welke plug-ins vereist zijn om de gedefinieerde taken te voltooien.
Vervolgens moeten we de taken definiëren die door Gulp worden uitgevoerd. In mijn geval wil ik twee dingen doen:
Het definiëren van een taak is voor alle intenties een JavaScript-aanroep. We gebruiken de Gulp-methode taak() om de taak te definiëren die we willen uitvoeren:
gulp.task ('js', function () gulp.src ('./ js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')) .pipe (gulp. dest ('./ js'));); Als je naar de bovenstaande code kijkt, is er een mix van methodeaanroepen van de plug-ins die ik heb gespecificeerd zoals vereist. De eerste methode, taak(), neemt een semantische naam voor de taak (in dit geval 'js') en een anonieme functie die het echte vlees bevat. Laten we de code uitsplitsen:
gulp.src (' ./ js / *. js') De src () methode laat me specificeren waar ik de JavaScript-bestanden die ik wil comprimeren vind en verandert ze in een stroom die een bestandsstructuur vertegenwoordigt die kan worden doorgegeven aan de plug-ins voor verwerking. Dit is onderdeel van Node.js 'Streams API en een van de redenen voor Gulp's mogelijkheid om zo'n beknopte, bondige API-syntaxis te hebben.
.leiding (verlelijken ())
De pijp() methode neemt de source stream afgeleid van de src () methode en geeft deze door aan de specifieke plug-in waarnaar wordt verwezen. In dit voorbeeld zou de uglify-plug-in de bronstream ontvangen.
.leiding (concat (all.js))
Net als uglify ontvangt de concat-plug-in de bronstream via de pijp() methode en voegt alle JavaScript-bestanden samen in één bestand met de naam "all.js"
.leiding (gulp.dest (' ./ js')); Eindelijk, met Gulp's dest () methode, all.js is geschreven naar mijn doelmap. Het proces als zeer eenvoudig en zeer leesbaar.
Het laatste wat we moeten doen is de standaard Gulp-taak bijwerken om onze "js" -taak uit te voeren.
gulp.task ('default', function () gulp.run ('js');); Door terug te gaan naar de opdrachtregel en in te typen 'slok', Gulp vindt de gulpfile.js bestand, laadt alle vereiste plug-ins en afhankelijkheden, start de standaardtaak en voert mijn uit 'Js' taak. Je ziet hier het eindresultaat van de minering en aaneenschakeling van mijn jQuery JavaScript-bestand:
Om dit een stap verder te brengen, biedt Gulp ook een andere methode aan kijk maar() die een middel biedt om automatisch een specifieke bron voor wijzigingen te controleren. Dit zorgt voor een geweldige automatisering van taken in plaats van constant handmatig in te moeten typen 'slok' op de opdrachtregel.
gulp.watch ('./ js / *', function () gulp.run ('js');); Wanneer dit wordt uitgevoerd, zal Gulp het opgegeven bestand rechtstreeks blijven controleren op wijzigingen in bestanden en zal een herhaling van het bestand worden uitgevoerd als een wijziging optreedt 'Js' taak om de JavaScript-bestanden te verkleinen en samen te voegen. Heel cool!
Toen ik voor het eerst hoorde van Gulp, was mijn eerste reactie "Oh brother another tool!". Jongen was ik weg. Gulp.js heeft echt een overtuigende syntaxis en API waarmee u uw taken eenvoudig kunt instellen. Hoewel het niet de breedte van plug-ins heeft die Grunt heeft, lijkt de plugin-repository te groeien met een leuke clip, vooral nu met zoveel interesse van ontwikkelaars.
Ik heb al veel ontwikkelaars gesproken die er actief naar migreren dus het lijkt een goed moment om in Gulp.js te komen.
