Share
Fordelene med oppgaveløpere i programvareutvikling er åpenbare. De hjelper til med å automatisere vanlige, ofte kjedelige oppgaver, og lar deg rett og slett fokusere på viktige ting, som å skrive fantastisk kode. Alvorlig, evnen til å automatisere oppgaver som bildekomprimering, minifisering, enhetstesting og mye mer er en stor tidsbesparende.
For mange fremtidsutviklere har goto-oppgaveløpet til dato vært Grunt som tillot deg å definere oppgavene dine ved hjelp av JavaScript inne i en fil som heter Gruntfile.js (AKA a Gruntfile). I utgangspunktet, hvis du visste JavaScript, var det en ganske enkel prosess, og det var en ganske enkel prosess, og bredden til tredjeparts plugins for andre verktøy som JSHint, Sass og Uglify gjør det til et av de mest fleksible verktøyene som er tilgjengelige..
Grunt har for det meste vært oppgaveløperen av valg, men nylig har en ny, kalt Gulp.js, fått mye oppmerksomhet for sin enkle oppsett og utrolig enkelt konfigurasjonsfilformat som gjør det lett å lese og håndterbart.
I denne opplæringen viser jeg deg hvordan du installerer Gulp og oppretter en enkel konfigurasjonsfil for å få føttene våte med denne flotte nye oppgaveløperen.
Gulp.js er en Node-basert oppgaveløper som Grunt, og som sådan må du ha Node.js installert for å kunne bruke det. Dette kan gjøres på flere forskjellige måter, spesielt avhengig av operativsystemet. Å være på OS X valgte jeg å bruke nvm, Tim Caswells fantastiske skript for å administrere flere versjoner av Node.js. Du kan også laste ned binærfilene direkte fra Node.js-siden. Hvis du er helt ny til Node.js, sørg for å sjekke ut Nettuts + -serien for å få fart på Node.js.
Gulp.js leveres pakket som en nodemodul som gjør det utrolig enkelt å installere ved hjelp av npm (Node Package Manager). For å installere Gulp, åpne opp terminalen din og skriv inn følgende:
npm install-g gulp
Dette trekker Gulp fra NPM register og konfigurerer det globalt på systemet ditt, slik at du kan få tilgang via kommandolinje.
For all hensikt er Gulp.js installert på dette tidspunktet, og du er klar til å begynne å bruke den med prosjektene dine.
Å bruke Gulp i prosjektet ditt er det et par viktige ting som må gjøres:
Disse trinnene må gjøres inne i prosjektets katalog slik at pakkene og konfigurasjonsfilene er tilgjengelige for Gulp.
Først lar vi installere avhengighetene:
npm installere - save-dev gulp gulp-util
Nå må vi installere Gulp-pluginene som skal utføre oppgavene som vi definerer i vår konfigurasjonsfil. Disse pluginene er også Node-pakke moduler, så vi skal bruke NPM igjen for å installere dem.
npm installere - save-dev gulp-uglify gulp-concat
I mitt tilfelle installerer jeg to plugins som vil tillate meg å minifisere / komprimere JavaScript-koden ved hjelp av Uglify.js-kompressoren og sammenkoble alle mine JavaScipt-filer til en enkelt kildefil.
Legg merke til at jeg brukte --save-dev flagg for å installere Gulp-avhengighetene og pluginene jeg trenger for prosjektet mitt. Dette sikrer at en oppføring for hver enkelt er laget til min devDependencies liste i min package.json filen som denne:
"devDependencies": "gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify": "~ 0.2.0", "gulp-concat" ~ 2.1.7 "
Dette sikrer at eventuelle pakkeavhengigheter for dette prosjektet enkelt kan installeres senere ved bruk av npm. Hvis du ikke har en package.json filen i prosjektet ditt, skriv bare inn npm init på kommandolinjen eller åpne en ny fil i redigeringsprogrammet, inkluderer å åpne og lukke krøllete bånd inne og lagre det som "package.json". Deretter gjenoppretter du NPM kommandoer oppført ovenfor for å oppdatere den. Vær oppmerksom på at det må fylles på krøllete bånd. Ellers, når du prøver å bruke --save-dev flagg, NPM Vil kaste en feil som sier at det ikke er en gyldig JSON-fil.
Mens jeg bare bruker to plugins for min opplæring, tilbyr Gulp over 200 plugins for alle typer funksjonalitet, inkludert:
og mange flere.
Som Grunt har Gulp en navnefilkonfigurasjonsfil som heter gulpfile.js som definerer alle nødvendige plugins sammen med oppgavene du skal kjøre. Du må opprette en fil kalt til roten til prosjektmappen din.
Syntaxen er enkel og tverr, noe som gjør den veldig lesbar og lett forståelig:
Accentsconagua
var gulp = krever ('gulp'), gutil = krever ('gulp-util'), uglify = krever ('gulp-uglify'), concat = krever ('gulp-concat'); Dette forteller bare Gulp hvilke plugins som kreves for å fullføre de definerte oppgavene.
Deretter må vi definere oppgavene som skal drives av Gulp. I mitt tilfelle ser jeg ut til å gjøre to ting:
Definere en oppgave er for alle formål en JavaScript-samtale. Vi bruker Gulp-metoden oppgave() å definere oppgaven vi vil kjøre:
gulp.task ('js', funksjon () gulp.src ('./ js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')) .pipe (gulp. dest ('./ js'));); Ser på koden ovenfor, er det en blanding av metallsamtaler fra pluginene jeg spesifiserte etter behov. Den første metoden, oppgave(), tar et semantisk navn for oppgaven (i dette tilfellet 'js') og en anonym funksjon som inneholder det virkelige kjøttet. La oss slå ned koden:
gulp.src (' ./ js / *. js') De src () metoden la oss spesifisere hvor jeg finner JavaScript-filene jeg vil komprimere og gjør dem til en strøm som representerer en filstruktur som kan sendes til pluginene for behandling. Dette er en del av Node.js 'Streams API og en av grunnene til Gulps evne til å ha en så tøff, kortfattet API-syntaks.
.rør (uglify ())
De rør() Metoden tar kilde strømmen avledet fra src () metode og overfører den til den spesifikke plugin som refereres. I dette eksemplet vil uglify-pluginet motta kildestrømmen.
.rør (CONCAT ( 'all.js'))
Som uklart mottar concat plugin kildestrømmen via rør() metode og sammenkobler alle JavaScript-filer til en fil kalt "all.js"
.rør (gulp.dest (' ./ js')); Til slutt bruker du Gulp dest () metode, all.js er skrevet til målmappen min. Prosessen hvis veldig grei og veldig lesbar.
Det siste vi må gjøre er å oppdatere standard Gulp-oppgaven for å kjøre vår "js" -oppgave.
gulp.task ('default', funksjon () gulp.run ('js');); Ved å gå tilbake til kommandolinjen og skrive inn 'gulp', Gulp finner gulpfile.js fil, laster alle nødvendige plugins og avhengigheter, starter standardoppgaven og kjører min 'Js' oppgave. Du kan se sluttresultatet her for minifisering og sammenkobling av min jQuery JavaScript-fil:
Ved å ta dette et skritt videre, gir Gulp også en annen metode som kalles se() som gir et middel for automatisk å sjekke en bestemt ressurs for endringer. Dette muliggjør stor automatisering av oppgaver i motsetning til å måtte manuelt skrive inn 'gulp' på kommandolinjen.
gulp.watch ('./ js / *', funksjon () gulp.run ('js');); Når dette kjører, fortsetter Gulp å overvåke det spesifiserte direkte for endringer i filer, og hvis en endring oppstår, vil kjøringen kjøre igjen 'Js' Oppgave å redusere og sammenkoble JavaScript-filene. Veldig kult!
Da jeg først hørte om Gulp, var min første reaksjon "Oh bror et annet verktøy!". Gutt var jeg av. Gulp.js har virkelig en overbevisende syntaks og API som gjør oppretting av oppgavene til en bris. Selv om den ikke har bredden til plugins som Grunt har, ser det ut til at plugin-arkivet vokser med et fint klipp, spesielt nå med så mye utviklerinteresse.
Jeg har allerede snakket med mange utviklere som aktivt migrerer til det, så det ser ut til at dette er en flott tid å komme inn på Gulp.js.
