Gulpin aloituspakettien käytön aloittaminen

Puhuminen CodeKitistä ja sen etupään kehittäjille tarjoamista eduista on myös tullut heti postauksen jälkeen ja myös Gulpin kaltaisista eduista .

Viesti näiden kahden välisestä erosta, miksi saatat haluta toista toiseen ja kumman tahansa eduista tai haitoista voi olla sen viesti.

Mutta tätä varten haluaisin ottaa aloituspaketit, joista kirjoitin Gulpiin liittyen, ja antaa yksinkertaisen esimerkin Gulp-aloitustiedostosta ja sen käyttämisestä WordPress-projekteissasi.

Gulpin käytön aloittaminen

Ensinnäkin olen Homebrew-fani, joten käytän sitä pakettien hallinnassa, jotka eivät kuulu Mac App Storeen. Tämä tekee pakettien asentamisesta, päivittämisestä ja asennuksen poistamisesta paljon helpompaa.

Jos et ole lukenut Homebrew-oppaani, tee se, koska tämän viestin loppuosassa oletetaan, että olet asentanut sen.

1 Asenna Gulp

Jos sinulla on Homebrew asennettuna, varmista, että kaikki näyttää hyvältä ja on ajan tasalla. Minulla on koko opas Gulpin määrittämiseen paikalliselle koneellesi.

Joten jos sinulla ei vielä ole tätä asetusta, katso tästä viestistä, kuinka se tehdään.

2 Kirjoita Gulpin määritystiedosto, osa 1

Jos haluat alustaa Gulp-määritystiedoston, kirjoita seuraava komento päätelaitteen projektisi juurihakemistoon:

Helppoa, eikö?

Tämä luo tyhjän gulpfile.js -tiedoston projektisi juurihakemistoon. Seuraavaksi on aika muokata tiedostoa.

Tässä viestissä aion käyttää neljää pakettia, jotka olen aiemmin hahmotellut:

• kulaus
• ahmi-sass
• ahmi-kuva
• nielaista-ilkeä

Jokainen näistä on tehtäviä, jotka vastaavat Sassin siirtämisestä, kuvien optimoinnista ja JavaScriptin vähentämisestä.

Tehtävissä, jotka haluat suorittaa komentoriviltä, ​​ei saa sisältää välilyöntejä.

Jos haluat määrittää perustehtävät, jotta voit suorittaa ne komentoriviltä, ​​sinun on tehtävä seuraava:

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

Kuvat

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

Juoksemalla niitä erikseen

Näiden tehtävien suorittaminen yksitellen edellyttää, että kirjoitat seuraavat konsoliin aina, kun haluat esimerkiksi siirtää Sass-tiedostoja ja pienentää JavaScript-tiedostoja:

Mutta tämä vanhenee nopeasti. Lisäksi se on vähemmän tehokas varsinkin, kun voit asettaa kellon suorittamaan tehtäväsi automaattisesti aina, kun tallennat tiedoston.

2 Kirjoita Gulpin määritystiedosto, osa 2

Kellon asentaminen on luultavasti paras asia, jonka voit tehdä, kun haluat säästää aikaa Gulpin avulla.

Katso tiedostoja ja tee jotain, kun tiedosto muuttuu. Tämä palauttaa aina EventEmitterin, joka lähettää change tapahtumia.

Kellon asentaminen on helppoa. Se on paljon kuin tehtävä (itse asiassa se vaatii tehtävän), mutta sillä on myös erityisiä argumentteja. Jos haluat lisätä katselutehtävän, joka käsittelee Sassia, JavaScriptiä ja kuvia, määritä seuraavat asetukset gulpfile.js-tiedostossa:

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

Suorita sitten tehtävä :

Tästä eteenpäin aina, kun tallennat Sass-tiedoston, JavaScript-tiedoston tai teet muutoksia kuvaan, tehtävä käynnistyy automaattisesti suorittamalla määritetyn tehtävän työn. Huomaa, että tämä toimii jatkuvasti sen säikeessä, joten sinun on avattava uusi päätevälilehti tai -ikkuna, jos sinun on tehtävä lisätöitä.

Huomautus versioista

Gulpin aiemmissa versioissa toinen argumentti kellotoiminnolle hyväksyisi taulukon; uusin versio vaatii kuitenkin varsinaisen funktion (jonka näet yllä, kun olen ilmoittanut sarjaksi ).

Lyhyesti sanottuna Gulp 4 mahdollistaa peräkkäisen suorituksen, joka suoritetaan sarjan kautta, ja rinnakkaissuorituksen (jossa voidaan käyttää rinnakkaistoimintoa ). Ne eivät kuulu tämän viestin soveltamisalaan, koska tämä on puhtaasti tarkoitettu auttamaan pääsemään alkuun.

Kun olet valmis, rakennusprosessissasi pitäisi olla paljon enemmän automaatiota.