Komma igång med Gulp.js

Gulp är ett Javascript-baserat verktyg som låter dig automatisera bitar i ditt arbetsflöde. Automatisering kan bokstavligen spara dig timmar om dagen. Oavsett om du är en utvecklare eller en designer som skapar HTML-trådramar då och då uppmanar jag dig att gräva i.

I den här artikeln ska vi titta på grunderna för att använda Gulp - från installation till grundsyntax och några exempel. I slutet av artikeln borde du kunna hitta, installera och använda paket som andra har skapat för Gulp att kompilera SASS, optimera bilder, skapa sprites, sammanfatta filer och mer!

Installera Gulp

Oroa dig inte, installationen är väldigt lätt. Vi måste använda terminalen i OSX och Linux, eller kommandotolken för Windows. Jag kommer att referera till det som Terminal från och med nu.

Öppna den och skriv npm -v och tryck på enter. Om du ser versionsnumret som visas har du redan installerat node - det här är ett beroende av Gulp.

Om du får en “Kommando inte hittat” (eller ett liknande fel), gå ner till Node.js-hämtningssidan och välj lämpligt paket för ditt system. När installerat är kommandot npm tillgängligt i terminalen.

Installera Gulp är lika enkelt. Klistra in följande kommando i terminalen, det är det:

npm installera - global gulp

Detta kommer att installera kommandot Gulp som kommer att finnas tillgängligt globalt på ditt system.

Lägga till en massa till ett projekt

Gulp är nu installerat, men vi måste lägga till det för varje projekt vi behöver det för, separat. Skapa en tom mapp nu och navigera till den i din terminal. Medan följande kommando används i mappen för projektet:

npm installera - save-dev gulp

Detta bör skapa en mapp node_modules och en npm-debug.log-fil i din projektmapp. Dessa används av Gulp för att göra sina saker till ditt projekt, du behöver inte tänka på dem på det här steget.

Anledningen till att vi måste lägga till Gulp för varje specifikt projekt är det varje projekt har olika krav. Man kan ringa till SASS, en annan för Mindre. Man kan använda Coffeescript, den andra får inte, och så vidare.

Gulpfilen

Gulpfile är där magiken händer, det är där du definierar de automatiseringar du behöver och när du vill att dom ska hända. Låt oss skapa en tom standarduppgift genom att skapa en fil med namnet gulpfile.js och klistra in följande kod i den.

var gulp = kräver ("gulp"); gulp.task ('default', funktion () // Det gör inget för nu, vi lägger till funktionalitet snart);

När den här filen är sparad kan du gå tillbaka till din terminal och köra kommandot Gulp på egen hand. Gulp upptäcker vilket projekt det är och kör standarduppgiften - den som vi just skapat. Du borde se något så här:

Ingenting händer verkligen här, eftersom uppgiften är tom, men det fungerar bra. Låt oss nu gå igenom några exempel!

Kopiera en fil

Det här är en tråkig, jag erkänner så mycket, men det hjälper dig att förstå vad som händer enkelt.

Skapa en fil med namnet i din projektmapp to_copy.txt , och en mapp som heter dev. Låt oss gå in i vårt Gulpfile och skapa en ny uppgift som heter kopia.

gulp.task ('copy', funktion () return gulp.src ('to_copy.txt'). pip (gulp.dest ('dev')););

Den första raden definierar en uppgift som heter namnet kopia. Inom detta använder vi gulp.src för att ange vilka filer vi riktar in mot den här uppgiften - i det här fallet är det en enda fil med namnet to_copy.txt.

Vi rör sedan dessa filer till funktionen gulp.dest som anger var vi vill sätta dessa filer - jag har använt dev-katalogen.

Gå tillbaka till din terminal och skriv gulp kopia För att köra den här uppgiften borde den kopiera den angivna filen till den angivna katalogen, något som så här:

Rörkommandot ligger i hjärtat av Gulp. Det är ett effektivt sätt att flytta data mellan kommandon. Kommandot src anger de filer som pipes till dest-kommandot. I mer komplicerade scenarier skulle vi leda våra filer till andra kommandon innan vi bestämde en destination.

Du bör också vara medveten om att källan kan ges som en enda fil eller flera filer. Om vi har en mapp som heter produktion och vi vill flytta alla filer från vår utveckling mapp i det, vi kan använda följande kommando:

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

Stjärnteckenet kommer att matcha allt i katalogen. Du kan också matcha alla filer i alla underkataloger och göra alla möjliga andra matchande matchningar. Ta en titt på nod-glob dokumentationen för mer info.

Sammanställning av SASS

Att kompilera ett formatark av SASS-filer är en gemensam uppgift för utvecklare. Det kan göras med Gulp ganska lätt, men vi behöver göra lite förberedelser. Förutom grundläggande kommandon som src, dest och ett antal andra, läggs all funktionalitet till via tredjepartstillägg. Så här går jag på att använda dem.

jag skriver SASS Gulp till Google, är det första resultatet vanligtvis det jag behöver, du borde hitta sidan för SASS-paketet. Det visar hur du installerar det (npm installera gulp-sass). Chansen är att du måste använda sudo för att installera den som administratör, så det kommer troligtvis att vara (sudo npm installera gulp-sass) .

När du är klar kan du använda den syntax som paketet dikterar för att kompilera din kod. För att göra detta, skapa en fil med namnet styles.scss med följande innehåll:

$ primära: # ff9900; kropp bakgrund: $ primary;

Skapa nu följande Gulp-uppgift i Gulpfile.

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

Innan du kör kommandot, glöm inte att "kräva" paketet längst upp i Gulpfile så här:

var sass = kräver ("gulp-sass");

När du kör gulp sass, alla filer med scss-förlängningen piperas till sass-funktionen, vilket kommer att konvertera dem till css. Dessa piperas sedan till destinationsfunktionen som placerar dem i css-mappen.

Titta på filer och mappar

Hittills är det här praktiskt, men vi måste fortfarande skriva ett kommando varje gång Vi vill köra en uppgift, som inte är särskilt effektiv, särskilt när det gäller ändringar av stilark. Gulp tillåter dig att titta på filer för ändringar och köra kommandon automatiskt.

Skapa ett kommando med namnet i Gulpfile automatisera som kommer att använda klockkommandot för att titta på en uppsättning filer för ändringar och köra ett specifikt kommando när en fil ändras.

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

Om du skriver gulp automatisera in i terminalen, kommer det att starta och avsluta uppgiften, men det kommer inte att återgå till snabbmeddelandet eftersom det övervakar för ändringar. Vi har angett att vi vill titta på alla scss-filer i rotkatalogen och om de ändras vill vi köra sass-kommandot som vi har ställt in tidigare.

Om du nu ändrar din style.scss-fil ska den kompileras till css-filen i css-katalogen automatiskt.

Kör flera uppdrag

Det finns många situationer där du kanske vill köra flera uppgifter. När du tittar på din javascriptmapp kanske du vill kompilera sammanfoga två filer och fortsätt sedan för att minska dem. Det finns två sätt att få detta gjort.

Om uppgifter är relaterade, gillar jag det kedja dem. Ett bra exempel skulle vara sammankoppling och minifiering av javascript-filer. Vi rör först våra filer till den konkatta åtgärden, rör dem sedan till gulp-uglify, använd sedan destinationsfunktionen för att mata ut dem.

Om uppgifterna inte är relaterade kan du ring flera uppgifter. Ett exempel skulle vara en uppgift där vi vill sammanfatta och begränsa våra skript och även sammanställa vår SASS. Här är han full Gulpfile av hur det skulle se ut.

var gulp = kräver ("gulp"); var uglify = kräver ('gulp-uglify'); var concat = kräver ("gulp-concat"); var sass = kräver ("gulp-sass"); gulp.task ('scripts', funktion () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()). pip (gulp.dest ('.'))); gulp.task ('styles', funktion () gulp.src ('/ * .scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ("automatisera", funktion () gulp.watch (['* .scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Om du skriver gulp skript in i terminalen kommer alla javascriptfiler i js-katalogen att sammanfogas, matas ut till huvudkatalogen, sedan uglified och sparas i huvudkatalogen.

Om du skriver gulp sass, alla dina scss-filer kommer att sammanställas och sparas i css-katalogen.

Om du skriver klunk (standarduppgiften), din skript Uppgiften kommer att köras, följt av din stilar uppgift.

De gulp automatisera Uppgiften tittar på flera mappar för ändringar i våra scss- och js-filer och kommer att utföra båda uppgifterna som vi definierat, om en förändring upptäcks.

Översikt

Att använda Gulp är inte svårt, faktiskt föredrar många människor det över Grunt på grund av sin enklare syntax. Kom ihåg de steg som ska vidtas när du skapar en ny automatisering:

Sök efter plugin
Installera plugin
Kräv plugin i din Gulpfile
Använd syntaxen i dokumentationen

De fem kommandon som finns i Gulp (uppgift, kör, klocka, src, dest) är de enda du behöver veta, alla tredjepartsaddonser har bra dokumentation. Här är en lista över några saker jag använder som du kan komma igång med just nu:

Optimera bilder med optimering av gulp-image
Skapa bildsprites med gulp-sprite
Sammanfogning av filer med gulp-concat
Minifiera filer med gulp-uglify
Radera filer med gulp-del
Javascript linting med gulp-jslint
JSON linting med gulp-jsonlint
Autoprefix CSS med gulp-autoprefixer
Sök och ersätt med gulp-frep
Minifiera CSS med gulp-minify-css