Komma igång med Gulp-startpaket

Att prata om CodeKit och fördelarna det erbjuder för front-end-utvecklare har också kommit precis efter ett inlägg och fördelarna som något som Gulp erbjuder också.

Ett inlägg om skillnaden mellan de två, varför du kanske vill ha det ena framför det andra, och fördelarna eller nackdelarna med båda kan vara dess inlägg.

Men för detta skulle jag vilja ta startpaketen jag skrev om angående Gulp och ge ett enkelt exempel på en start Gulp-fil och hur man använder den i dina WordPress-projekt.

Komma igång med Gulp

För det första är jag ett fan av Homebrew, så när det kommer till att hantera paket som inte är en del av Mac App Store använder jag det. Detta gör det mycket lättare att installera paket, uppdatera dem och avinstallera dem.

Om du inte har läst min guide om Homebrew, vänligen gör det eftersom resten av det här inlägget förutsätter att du har det installerat.

1 Installera Gulp

Om du har Homebrew installerat, se till att allt ser bra ut och är uppdaterat, jag har en hel guide för att ställa in Gulp på din lokala maskin.

Så om du inte redan har den inställningen, kolla in det här inlägget för hur du gör det.

2 Skriv din Gulp-konfigurationsfil, del 1

För att initiera en Gulp-konfigurationsfil, skriv in följande kommando i ditt projekts rotkatalog i din terminal:

Lätt, är det inte?

Detta kommer att skapa en tom gulpfile.js i ditt projekts rotkatalog. Därefter är det dags att redigera filen.

För det här inlägget kommer jag att använda fyra paket som jag tidigare har beskrivit:

• klunk
• gulp-sass
• gulp-bild
• gulp-uglify

Var och en av dessa är uppgifter som ansvarar för att transpilera Sass, optimera bilder och förminska JavaScript.

Uppgifter som du vill köra från kommandoraden bör inte ha mellanslag i dem.

För att ställa in de grundläggande uppgifterna så att du kan köra dem från kommandoraden, måste du göra följande:

Sass

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

JavaScript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Bilder

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Kör dem individuellt

Att köra dessa uppgifter individuellt kräver att du skriver in följande i konsolen varje gång du vill, till exempel, transpilera dina Sass-filer och förminska dina JavaScript-filer:

Men det här blir snabbt gammalt. Dessutom är det mindre effektivt, särskilt när du kan ställa in en klocka för att automatiskt köra dina uppgifter när du sparar en fil.

2 Skriv din Gulp-konfigurationsfil, del 2

Att ställa in en klocka är förmodligen det bästa du kan göra när det gäller att spara tid med Gulp.

Titta på filer och gör något när en fil ändras. Detta returnerar alltid en EventEmitter som avger change händelser.

Det är enkelt att ställa in en klocka. Det är ungefär som en uppgift (i själva verket kräver det en uppgift) men det har också speciella argument. För att lägga till en bevakningsuppgift som hanterar Sass, JavaScript och bilder, ställ in följande i din gulpfile.js:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Sedan är det bara att köra uppgiften :

Härifrån, varje gång du sparar en Sass-fil, en JavaScript-fil eller gör en ändring i en bild, kommer uppgiften att starta automatiskt och utföra arbetet med den definierade uppgiften. Observera att detta kommer att köras oavbrutet i sin tråd, så du måste öppna en ny terminalflik eller ett nytt fönster om du behöver göra något ytterligare arbete.

En anteckning om versioner

I tidigare versioner av Gulp skulle det andra argumentet för klockfunktionen acceptera en array; den senaste versionen kräver dock en verklig funktion (vilket du kan se ovan genom att jag har deklarerat serie ).

Det korta med det är att Gulp 4 tillåter sekventiell exekvering, som görs via serier, och parallell exekvering (som kan använda parallellfunktionen ). De ligger utanför omfattningen av det här inlägget eftersom detta enbart är tänkt att hjälpa dig att komma igång.

När du är klar bör du ha mycket mer automatisering i din byggprocess.