Paar näksimispaketti algajatele

Viimati uuendatud nov. 9, 2022

Sisu

Tarkvara, nagu Gulp ja muud utiliidid, pole uus. Neile, kes pole neid varem kasutanud, võib selle alustamine olla pisut hirmutav (aga tegelikult ei tohiks see nii olla).

Võrreldes selliste tööriistadega nagu CodeKit (mis mulle endiselt meeldib ja olenevalt projektist soovitab), on neil pisut rohkem kulusid nende seadistamisel, seadistamisel ja tööks valmisolekul.

Kuid kui olete selle kõik üles seadnud, võib see olla väga kasulik hajutatud meeskonnaga, olenemata operatsioonisüsteemist, ja see võib aidata teil teie ehitusprotsessi pisut jõulisemaks muuta.

See pole aga postituse eesmärk. Selle asemel on siin alustuseks nimekiri mõnest paketist.

Mõelge neile järgmiselt: kui otsite võimalusi Sassi, JavaScripti ja pildi optimeerimisega töötamiseks, on need head teegid.

Löögipaketid algajatele

Enne iga järgmise paketi juurde hüppamist tahan märkida, et oluline on läbi lugeda kõik lingitud lehed. Dokumentatsioon aitab tutvuda teekide pakutavate valikutega, mida minu esitatud kood ei näita.

See tähendab, et ärge lihtsalt kopeerige ja kleepige seda, mida ma olen esitanud. Kasutage seda lähtepunktina, kuid lugege läbi ka dokumentatsioon. Võib-olla ei leia te midagi uut.

Samuti võite avastada, et teie konkreetse projekti kohandamiseks on võimalusi.

1 Sass

Võite teha koostööd Lessiga (ma ei ole siin ega seal tegelikult), kuid ma eelistan Sassi. Seega kasutan ma raamatukogu gulp-sass spetsiaalselt Sassi failide kompileerimiseks CSS-i.

Tavaliselt on mul varade kataloog ja selles kataloogis on mõned piltide, stiilide ja skriptide alamkataloogid .

Stiilide kataloogis on mul kaks alamkataloogi:

scss
css

Hoian kõiki oma SCSS-faile vastavas kataloogis ja seejärel kasutan kompileeritud failide CSS-i väljastamiseks gulp-sassi .

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

Sealt panen CSS-failid järjekorda, kasutades selleks vajalikku WordPress API funktsiooni.

2 JavaScripti minimeerimine

Praeguseks on JavaScripti failide minimeerimise eelised ikka ja jälle tõestatud, nii et ma ei hakka selle teemaga edasi tegelema.

Olen proovinud mõnda paketti, mis on seotud JavaScripti minimeerimisega ja gulp-uglify on see, mille kasutamist mulle kõige rohkem meeldib.

Tuletage meelde eelmisest jaotisest, et mul on oma varade kataloog ja selles on mul skriptide alamkataloog. See kataloog sisaldab ühte alamkataloogi: dev.

Võtan JavaScript-failid, mis asuvad dev -is, ja väljastan need skriptide kataloogi juure .

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

Sealt, nagu teen eespool, panen need järjekorda, kasutades sama WordPress API funktsiooni.

3 Pildi optimeerimine

Lõpuks, üks asi, mis võib teie lehe(te) kiire laadimise tagamisel palju aidata, on see, et teie pildivarad on optimeeritud.

Muidugi on mõningaid tööriistu, mida saate selleks käsitsi kasutada, kuid kui leiate end sageli pildivarasid lisamas, muutmas või muutmas ja soovite optimeerimise koostamise protsessi automatiseerida, siis soovitan kasutada gulp-imagemini.

[image]

Selle konkreetse teegi jaoks on mõned sõltuvused, nii et peate veenduma, et ka need on kaasatud. Need sisaldavad

pilt-gifsicle,
imagein-jpegtran,
pildi valimine,
imagein-svgo.

Neid saab käsitsi lisada konfiguratsioonifailidesse, installida käsurea kaudu või muul viisil. Sellest hoolimata veenduge, et teil oleks need enne piltide optimeerimist.

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

Pange tähele ülaltoodud koodist (ja sellest, mida ma olen varem maininud), et minu piltide kataloog asub varades, nii et kui käivitan ülalmainitud toimingu, optimeerib see selles asukohas kõiki toetatud pilditüüpe.

Paketifailid, Gulp-failid ja kõik see?

Kui olete Gulpi, Node’i või muude ehitussüsteemidega uustulnuk, on Node’i ja Gulpi installimise ja seadistamise osas vaja veel natuke käsitleda.

Olen otsustanud selle praegu vahele jätta, kuna selle kohta on palju dokumente, kuid võib-olla vaatan, mida me kasutame, kui seda oma projektidesse kaasame.

: tommcfarlin.com