Muutama ruokapaketti aloittelijoille

Viimeisin päivitys marras 9, 2022

Sisältö

Pakettitiedostot, Gulp-tiedostot ja kaikki?

Ohjelmistot, kuten Gulp ja muut apuohjelmat, eivät ole uusia. Niille, jotka eivät ole käyttäneet niitä aiemmin, voi olla hieman pelottavaa aloittaa (mutta sen ei todellakaan pitäisi olla).

Verrattuna työkaluihin, kuten CodeKit (josta pidän edelleen ja jota suosittelen projektista riippuen), niillä on hieman enemmän kustannuksia niiden määrittämisessä, määrittämisessä ja käyttövalmiudessa.

Mutta kun olet saanut kaiken valmiiksi, se voi olla todella hyödyllinen hajautetun tiimin kanssa käyttöjärjestelmästä riippumatta, ja se voi auttaa tekemään rakennusprosessistasi hieman vankemman.

Se ei kuitenkaan ole postauksen tarkoitus. Sen sijaan tässä on luettelo muutamasta paketista aloittelijoille.

Ajattele niitä näin: Jos etsit tapoja työskennellä Sassin, JavaScriptin ja kuvan optimoinnin kanssa, nämä ovat hyviä kirjastoja.

Gulp-paketit aloittelijoille

Ennen kuin siirryn jokaiseen seuraavista paketeista, haluan huomauttaa, että on tärkeää lukea jokainen linkitetyistä sivuista. Dokumentaatio auttaa tutustumaan kirjastojen tarjoamiin vaihtoehtoihin, joita antamani koodi ei näytä.

Eli älä vain kopioi ja liitä toimittamiani. Käytä sitä lähtökohtana, mutta lue myös dokumentaatio läpi. Et ehkä löydä mitään uutta.

Sitten taas saatat huomata, että on olemassa vaihtoehtoja tietyn projektisi säätämiseen.

1 Sass

Voit halutessasi työskennellä Lessin kanssa (en todellakaan ole täällä enkä siellä), mutta minulla on tapana suosia Sassia. Siksi käytän kirjastoa, gulp-sass, erityisesti Sass-tiedostojen kääntämiseen CSS:ksi.

Minulla on tavallisesti omaisuushakemisto, ja siinä on joitain alihakemistoja kuville, tyyleille ja skripteille.

Tyylihakemistossa minulla on kaksi alihakemistoa :

scss
css

Säilytän kaikki SCSS-tiedostoni vastaavassa hakemistossa ja käytän gulp-sass-toimintoa kääntäen tiedostot CSS:ään.

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

Sieltä lisään CSS-tiedostot jonoon käyttämällä tarvittavaa WordPress API -toimintoa.

2 JavaScript-pienennys

Tässä vaiheessa JavaScript-tiedostojen pienentämisen edut on todistettu yhä uudelleen ja uudelleen, joten en aio käsitellä asiaa sen enempää.

Olen kokeillut joitakin paketteja, jotka liittyvät JavaScriptin minifiointiin, ja gulp-uglify on se, jonka käyttämisestä pidän eniten.

Muista edellisestä osiosta, että minulla on omaisuushakemistoni ja siinä minulla on komentosarja – alihakemistoni. Tämä hakemisto sisältää yhden oman alihakemistonsa: dev.

Otan JavaScript-tiedostot, jotka sijaitsevat dev :ssä ja tulostan ne komentosarjahakemiston juureen .

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

Sieltä, kuten teen yllä, laitan ne jonoon käyttämällä samaa WordPress API -toimintoa.

3 Kuvan optimointi

Lopuksi yksi asia, joka voi auttaa varmistamaan, että sivusi latautuvat nopeasti, on varmistaa, että kuvasisältösi on optimoitu.

Tietysti on joitain työkaluja, joita voit käyttää manuaalisesti, mutta jos huomaat lisääväsi, muuttavasi tai muokkaavasi kuvasisältöjä usein ja haluat automatisoida optimoinnin koontiprosessin, suosittelen käyttämään gulp-imagemin -ohjelmaa.

[kuva]

Tässä tietyssä kirjastossa on joitain riippuvuuksia, joten sinun on varmistettava, että ne ovat myös mukana. Nämä sisältävät

kuva-gifsicle,
imagein-jpegtran,
kuvan valinta,
imagein-svgo.

Ne voidaan lisätä manuaalisesti asetustiedostoihisi, asentaa komentorivin kautta tai muuten. Varmista kuitenkin, että sinulla on ne, ennen kuin yrität optimoida kuviasi.

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

Huomaa yllä olevasta koodista (ja siitä, mitä olen maininnut aiemmin), että kuvahakemistoni sijaitsee resursseissa, joten kun suoritan yllä mainitun tehtävän, se optimoi kaikki tuetut kuvatyypit kyseisessä paikassa.

Pakettitiedostot, Gulp-tiedostot ja kaikki?

Jos olet uusi Gulp-, Node- tai muiden rakennusjärjestelmien käytössä, Noden ja Gulpin asentamisessa ja määrittämisessä on vielä vähän muutakin käsiteltävää.

Olen päättänyt jättää sen väliin toistaiseksi, koska aiheesta on paljon dokumentaatiota, mutta ehkä katson, mitä käytämme aina, kun sisällytämme tämän projekteihimme.

: tommcfarlin.com