Gulpi stardipakettidega alustamine

Rääkimine CodeKitist ja selle esiotsa arendajatele pakutavatest eelistest on samuti tulnud vahetult pärast postitust ja eeliseid, mida Gulp pakub.

Selle postituseks võib olla postitus nende kahe erinevuse kohta, selle kohta, miks võiksite üht teisele eelistada ning kummagi eelistest või puudustest.

Kuid selleks tahaksin võtta lähtepaketid, millest Gulpi kohta kirjutasin, ja tuua lihtsa näite Gulpi käivitusfailist ja selle kasutamisest oma WordPressi projektides.

Gulpiga alustamine

Esiteks, ma olen Homebrew’i fänn, nii et kui on vaja hallata pakette, mis ei kuulu Mac App Store’i, siis kasutan seda. See muudab pakettide installimise, värskendamise ja desinstallimise palju lihtsamaks.

Kui te pole minu Homebrewi juhendit lugenud, tehke seda, kuna ülejäänud postitus eeldab, et olete selle installinud.

1 Installige Gulp

Kui teil on installitud Homebrew, veenduge, et kõik näeks hea välja ja oleks ajakohane. Mul on kogu juhend Gulpi seadistamiseks teie kohalikus masinas.

Nii et kui teil seda seadistust veel pole, vaadake seda postitust selle kohta, kuidas seda teha.

2 Kirjutage oma Gulpi konfiguratsioonifail, 1. osa

Gulpi konfiguratsioonifaili lähtestamiseks sisestage terminalis oma projekti juurkataloogi järgmine käsk :

Lihtne, kas pole?

See loob teie projekti juurkataloogi tühja faili gulpfile.js . Järgmiseks on aeg faili redigeerida.

Selle postituse jaoks kasutan nelja paketti, mida olen eelnevalt kirjeldanud:

• ahmima
• gulp-sass
• sõõm-pilt
• ahmima-inetuma

Kõik need on ülesanded, mis vastutavad Sassi ülekandmise, piltide optimeerimise ja JavaScripti minimeerimise eest.

Ülesannetes, mida soovite käsurealt käivitada, ei tohiks olla tühikuid.

Põhiülesannete seadistamiseks nii, et saaksite neid käsurealt käivitada, peate tegema järgmist.

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'));
});

Pildid

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

Nende eraldi jooksmine

Nende ülesannete ükshaaval käitamiseks tuleb sisestada konsooli iga kord, kui soovite näiteks Sassi-faile üle kanda ja JavaScripti faile minimeerida:

Aga see vananeb kiiresti. Lisaks on see vähem tõhus, eriti kui saate seadistada kella nii, et see käivitaks faili salvestamisel automaatselt teie ülesandeid.

2 Kirjutage oma Gulpi konfiguratsioonifail, 2. osa

Kella seadistamine on ilmselt parim, mida saate Gulpiga aja säästmiseks teha .

Vaadake faile ja tehke midagi, kui fail muutub. See tagastab alati EventEmitteri, mis väljastab change sündmusi.

Kella seadistamine on lihtne. See sarnaneb ülesandega (tegelikult nõuab see ülesannet), kuid sellel on ka erilised argumendid. Sassi, JavaScripti ja pilte haldava jälgimisülesande lisamiseks seadistage failis gulpfile.js järgmine:

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'));
});

Seejärel käivitage lihtsalt ülesanne :

Iga kord, kui salvestate Sassi-faili, JavaScript-faili või muudate pilti, käivitub see ülesanne määratud ülesande täitmisel automaatselt. Pange tähele, et see töötab selle lõimes pidevalt, nii et kui teil on vaja täiendavat tööd teha, peate avama uue terminali vahekaardi või akna.

Märkus versioonide kohta

Gulpi varasemates versioonides aktsepteeris jälgimisfunktsiooni teine ​​argument massiivi; aga uusim versioon nõuab tegelikku funktsiooni (mida näete ülal, kui ma olen deklareerinud seeria ).

Lühike on see, et Gulp 4 võimaldab järjestikust täitmist, mida tehakse seeria kaudu, ja paralleelset täitmist (mis võib kasutada paralleelfunktsiooni ). Need ei kuulu selle postituse ulatusse, kuna see on mõeldud ainult teie alustamiseks.

Kui see on tehtud, peaks teie ehitusprotsess olema palju rohkem automatiseeritud.