Share
Fördelarna med uppgiftslöpare i mjukvaruutveckling är uppenbara. De hjälper till att automatisera vanliga, ofta tråkiga uppgifter och låta dig fokusera helt på viktiga saker, som att skriva fantastisk kod. Allvarligt är möjligheten att automatisera uppgifter som bildkomprimering, minifiering, enhetstestning och mycket mer en stor tidsbesparare.
För många front-end-utvecklare har goto-uppgiftslöparen hittills varit Grunt som gjorde det möjligt för dig att definiera dina uppgifter med hjälp av JavaScript inuti en fil som heter Gruntfile.js (AKA a Gruntfile). I grund och botten, om du kände till JavaScript, var det en ganska enkel process att installera en Grunt-uppgift och bredden av tredjepartspluggar för andra verktyg som JSHint, Sass och Uglify gör det till ett av de mest flexibla verktygen.
För det mesta har Grunt varit uppgiftslöpare i valet, men nyligen har en ny, med namnet Gulp.js, fått mycket uppmärksamhet för sin lätta installation och otroligt enkelt konfigurationsfilformat som gör det lättläsbart och hanterbart.
I den här handledningen visar jag dig hur du installerar Gulp och skapa en enkel konfigurationsfil för att få dina fötter blötta med den här nya nya uppdragsrunner.
Gulp.js är en nodbaserad uppgiftslöpare precis som Grunt och som sådan måste du ha Node.js installerat för att kunna använda det. Detta kan göras på flera olika sätt, särskilt beroende på ditt operativsystem. Att vara på OS X valde jag att använda nvm, Tim Caswells fantastiska manus för att hantera flera versioner av Node.js. Du kan också ladda ner binärerna direkt från Node.js-webbplatsen. Om du är helt ny på Node.js, var noga med att kolla in Nettuts + -serien för att få fart på Node.js.
Gulp.js kommer förpackas som en nodmodul vilket gör det oerhört enkelt att installera med npm (Node Package Manager). För att installera Gulp, öppna din terminal och skriv in följande:
npm installera -g gulp
Detta drar Gulp från npm registret och konfigurerar det globalt på ditt system så att du kan komma åt via kommandoraden.
För alla ändamål är Gulp.js installerad just nu och du är redo att börja använda den med dina projekt.
Att använda Gulp i ditt projekt finns ett par viktiga saker som måste göras:
Dessa steg måste göras i projektets katalog så att paketen och konfigurationsfilerna är tillgängliga för Gulp.
Först kan vi installera beroenden:
npm installera - save-dev gulp gulp-util
Nu måste vi installera Gulp-plugins som utför de uppgifter som vi definierar i vår konfigurationsfil. Dessa plugins är också Node-paketmoduler så vi ska använda npm igen för att installera dem.
npm installera - save-dev gulp-uglify gulp-concat
I mitt fall installerar jag två plugins som tillåter mig att minifiera / komprimera min JavaScript-kod med Uglify.js-kompressorn och sammanlänka alla mina JavaScipt-filer till en enda källfil.
Observera att jag använde --spara-dev flagga för att installera Gulp beroenden och plugins jag behöver för mitt projekt. Detta säkerställer att en post för varje är gjord till min devDependencies lista i mina package.json filen så här:
"devDependencies": "gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify": "~ 0.2.0", "gulp-concat" ~ 2,1,7 "
Detta säkerställer att eventuella paketberoende för detta projekt enkelt kan installeras senare med användning av npm. Om du inte har en package.json filen i ditt projekt, skriv bara in npm init på kommandoraden eller öppna en ny fil i din redaktör, inkludera öppna och stänga lockiga hängslen inuti och spara det som "package.json". Återan sedan npm kommandon som listas ovan för att uppdatera det. Observera att det är nödvändigt att lägga till de krökta axlarna. Annars, när du försöker använda --spara-dev flagga, npm kommer att kasta ett fel som säger att det inte är en giltig JSON-fil.
Medan jag bara använder två plugins för min handledning, erbjuder Gulp över 200 plugins för alla typer av funktionalitet, inklusive:
och många fler.
Liksom Grunt har Gulp en namnkonfigurationsfil kallad gulpfile.js som definierar alla nödvändiga plugins tillsammans med de uppgifter du ska köra. Du måste skapa en fil som kallas till roten i din projektmapp.
Syntaxen är enkel och tät och gör den väldigt läsbar och lättförståelig:
Accentsconagua
var gulp = kräver ('gulp'), gutil = kräver ('gulp-util'), uglify = kräver ('gulp-uglify'), concat = kräver ('gulp-concat'); Detta berättar helt enkelt Gulp vilka plugins som krävs för att slutföra de definierade uppgifterna.
Därefter måste vi definiera de uppgifter som kommer att drivas av Gulp. I mitt fall vill jag göra två saker:
Att definiera en uppgift är för alla ändamål ett JavaScript-samtal. Vi använder Gulp-metoden uppgift() för att definiera den uppgift vi vill köra:
gulp.task ('js', funktion () gulp.src ('./ js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')) .pipe (gulp. dest ('./ js'));); Om du tittar på koden ovan finns en blandning av metodsamtal från de pluginprogram som jag angav efter behov. Den första metoden, uppgift(), tar ett semantiskt namn för uppgiften (i det här fallet "js") och en anonym funktion som innehåller det riktiga köttet. Låt oss bryta ned koden:
gulp.src (' ./ js / *. js') De src () Metoden låt oss ange var jag ska hitta de JavaScript-filer som jag skulle vilja komprimera och förvandla dem till en ström som representerar en filstruktur som kan överföras till plugins för bearbetning. Det här är en del av Node.js Streams API och en av orsakerna till att Gulp har en så kortfattad, kortfattad API-syntax.
.rör (uglify ())
De rör() Metoden tar källströmmen härledd från src () metod och skickar den till den specifika plugin som refereras. I det här exemplet skulle uglify-pluginet få källströmmen.
.pipe (concat ( 'all.js'))
Liksom uglify, mottar concat plugin källströmmen via rör() metod och sammanlänkar alla JavaScript-filer till en fil som heter "all.js"
.pipe (gulp.dest (' ./ js')); Slutligen, med hjälp av Gulp's dest () metod, all.js är skrivet till min målmapp. Processen om väldigt enkel och väldigt läsbar.
Det sista vi behöver göra är att uppdatera den vanliga Gulp-uppgiften för att köra vår "js" -uppgift.
gulp.task ('default', funktion () gulp.run ('js');); Genom att gå tillbaka till kommandoraden och skriva in 'klunk', Gulp finner gulpfile.js fil, laddar alla nödvändiga plugins och beroenden, startar standarduppgiften och kör mina 'Js' uppgift. Du kan se slutresultatet här för minifiering och sammanlänkning av min jQuery JavaScript-fil:
Med detta ytterligare ett steg ger Gulp också en annan metod som heter Kolla på() vilket ger ett medel för att automatiskt kontrollera en specifik resurs för ändringar. Detta möjliggör stor automatisering av uppgifter jämfört med att man måste skriva in manuellt 'klunk' på kommandoraden.
gulp.watch ('./ js / *', funktion () gulp.run ('js');); När detta körs, fortsätter Gulp att övervaka den angivna direkten för ändringar i filer och om en ändring uppstår, körs igen 'Js' uppgift att minska och sammanfatta JavaScript-filerna. Väldigt coolt!
När jag först fick veta om Gulp var min första reaktion "Oh broder ett annat verktyg!". Pojke var jag borta. Gulp.js har verkligen en övertygande syntax och API som gör att dina uppgifter är så bra som möjligt. Medan den inte har bredden av plugins som Grunt har, verkar dess plugin repository växa med ett fint klipp, speciellt nu med så mycket utvecklarintresse.
Jag har redan talat med många utvecklare som aktivt migrerar till det så det verkar som om det här är en bra tid att komma in i Gulp.js.
