Några Gulp-paket för nybörjare

Programvara som Gulp och andra verktyg är inte nya. För den som inte har använt dem tidigare kan det vara lite jobbigt att komma igång (men det borde det verkligen inte vara).

I jämförelse med verktyg som CodeKit (som jag fortfarande gillar och rekommenderar, beroende på projektet), har de lite mer omkostnader när det gäller att få dem konfigurerade, konfigurerade och redo att gå.

Men när du väl har ställt in allt, kan det vara riktigt användbart med ett distribuerat team oavsett operativsystem, och det kan hjälpa det att göra din byggprocess lite mer robust.

Det är dock inte syftet med inlägget. Här är istället en lista med några paket till att börja med.

Tänk på dem så här: Om du letar efter sätt att arbeta med Sass, JavaScript och bildoptimering är dessa bra bibliotek.

Gulp-paket för nybörjare

Innan jag hoppar in i vart och ett av följande paket vill jag notera att det är viktigt att läsa var och en av de länkade sidorna. Dokumentationen hjälper till att gå igenom alternativ som biblioteken erbjuder som koden jag har tillhandahållit inte visas.

Det vill säga, kopiera och klistra inte bara in det jag har tillhandahållit. Använd det som utgångspunkt, men läs också igenom dokumentationen. Du kanske inte hittar något nytt.

Återigen kan du upptäcka att det finns alternativ för att justera just ditt projekt.

1 Sass

Du kan välja att arbeta med Less (jag är varken här eller där, egentligen) men jag tenderar att favorisera Sass. Således använder jag ett bibliotek, gulp-sass, specifikt för att kompilera Sass-filer till CSS.

Jag har normalt en tillgångskatalog och i den katalogen finns några underkataloger för bilder, stilar och skript.

Inom stilkatalogen har jag två underkataloger:

1. scss
2. css

Jag behåller alla mina SCSS-filer i respektive katalog, och sedan använder jag gulp-sass för att mata ut de kompilerade filerna till CSS.

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

Därifrån ställer jag CSS-filerna i kö med den nödvändiga WordPress API-funktionen.

2 JavaScript-minifiering

Vid det här laget har fördelarna med att förminska JavaScript-filer bevisats om och om igen, så jag tänker inte utarbeta poängen ytterligare.

Det finns några paket som jag har provat när det gäller att arbeta med JavaScript-minifiering och gulp-uglify är det som jag tycker jag tycker mest om att använda.

Kom ihåg från föregående avsnitt att jag har min tillgångskatalog och i den har jag min  underkatalog för skript. Den katalogen innehåller en egen underkatalog: dev.

Jag tar JavaScript-filerna som finns i dev och matar ut dem i roten av skriptkatalogen.

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

Därifrån, som jag gör ovan, ställer jag dem i kö med samma WordPress API-funktion.

3 Bildoptimering

Slutligen, en sak som kan räcka långt för att se till att dina sidor laddas snabbt är att se till att dina bildtillgångar är optimerade.

Visst, det finns några verktyg du kan använda manuellt för att göra detta, men om du ofta lägger till, ändrar eller modifierar bildtillgångar och du vill automatisera byggprocessen för optimering, rekommenderar jag att du använder gulp-imagemin.

[bild]

Det finns vissa beroenden för just det här biblioteket så du måste se till att de också ingår. Dessa inkluderar

• bild-i-gifsicle,
• imagein-jpegtran,
• imagein-optipng,
• imagein-svgo.

Dessa kan läggas till manuellt i dina konfigurationsfiler, installeras via kommandoraden eller på annat sätt. Oavsett vilket, se till att du har dem innan du försöker optimera dina bilder.

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

Notera från koden ovan (och vad jag har nämnt tidigare) att min bildkatalog finns i tillgångar så när jag kör uppgiften som nämnts ovan kommer den att optimera någon av de bildtyper som stöds på den platsen.

Paketfiler, gulpfiler och allt det där?

Om du är ny på Gulp, Node eller andra byggsystem, så finns det lite mer att täcka när det gäller att installera Node och Gulp och ställa in dem.

Jag har valt att hoppa över det för nu eftersom det finns mycket dokumentation kring detta, men jag kanske ska ta en titt på vad vi använder när vi införlivar detta i våra projekt.