{"id":229980,"date":"2022-11-15T12:59:00","date_gmt":"2022-11-15T09:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229980"},"modified":"2022-11-09T19:34:04","modified_gmt":"2022-11-09T16:34:04","slug":"muutama-ruokapaketti-aloittelijoille","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/muutama-ruokapaketti-aloittelijoille\/","title":{"rendered":"Muutama ruokapaketti aloittelijoille"},"content":{"rendered":"\n

Ohjelmistot, kuten Gulp<\/a> ja muut apuohjelmat, eiv\u00e4t ole uusia. Niille, jotka eiv\u00e4t ole k\u00e4ytt\u00e4neet niit\u00e4 aiemmin, voi olla hieman pelottavaa aloittaa (mutta sen ei todellakaan pit\u00e4isi olla).<\/p>\n

Verrattuna ty\u00f6kaluihin, kuten CodeKit<\/a> (josta pid\u00e4n edelleen ja jota suosittelen<\/a> projektista riippuen), niill\u00e4 on hieman enemm\u00e4n kustannuksia niiden m\u00e4\u00e4ritt\u00e4misess\u00e4, m\u00e4\u00e4ritt\u00e4misess\u00e4 ja k\u00e4ytt\u00f6valmiudessa.<\/p>\n

Mutta kun olet saanut kaiken valmiiksi, se voi olla todella hy\u00f6dyllinen hajautetun tiimin kanssa k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4st\u00e4 riippumatta, ja se voi auttaa tekem\u00e4\u00e4n rakennusprosessistasi hieman vankemman.<\/p>\n

Se ei kuitenkaan ole postauksen tarkoitus. Sen sijaan t\u00e4ss\u00e4 on luettelo muutamasta paketista aloittelijoille.<\/p>\n

Ajattele niit\u00e4 n\u00e4in: Jos etsit tapoja ty\u00f6skennell\u00e4 Sassin<\/a>, JavaScriptin ja kuvan optimoinnin kanssa, n\u00e4m\u00e4 ovat hyvi\u00e4 kirjastoja.<\/p>\n

Gulp-paketit aloittelijoille<\/h2>\n

Ennen kuin siirryn jokaiseen seuraavista paketeista, haluan huomauttaa, ett\u00e4 on t\u00e4rke\u00e4\u00e4 lukea jokainen linkitetyist\u00e4 sivuista. Dokumentaatio auttaa tutustumaan kirjastojen tarjoamiin vaihtoehtoihin, joita antamani koodi ei n\u00e4yt\u00e4.<\/p>\n

Eli \u00e4l\u00e4 vain kopioi ja liit\u00e4 toimittamiani. K\u00e4yt\u00e4 sit\u00e4 l\u00e4ht\u00f6kohtana, mutta lue my\u00f6s dokumentaatio l\u00e4pi. Et ehk\u00e4 l\u00f6yd\u00e4 mit\u00e4\u00e4n uutta.<\/p>\n

Sitten taas saatat huomata, ett\u00e4 on olemassa vaihtoehtoja tietyn projektisi s\u00e4\u00e4t\u00e4miseen.<\/p>\n

1 Sass<\/h3>\n

Voit halutessasi ty\u00f6skennell\u00e4 Lessin<\/a> kanssa (en todellakaan ole t\u00e4\u00e4ll\u00e4 enk\u00e4 siell\u00e4), mutta minulla on tapana suosia Sassia. Siksi k\u00e4yt\u00e4n kirjastoa, gulp-sass<\/a>, erityisesti Sass-tiedostojen k\u00e4\u00e4nt\u00e4miseen CSS:ksi.<\/p>\n

\"Muutama<\/a><\/p>\n

Minulla on tavallisesti omaisuushakemisto<\/strong>, ja siin\u00e4 on joitain alihakemistoja kuville<\/strong>, tyyleille<\/strong> ja skripteille<\/strong>.<\/p>\n

Tyylihakemistossa\u00a0 minulla on kaksi alihakemistoa<\/strong> :<\/p>\n

    \n
  1. scss<\/strong><\/li>\n
  2. css<\/strong><\/li>\n<\/ol>\n

    S\u00e4ilyt\u00e4n kaikki SCSS-tiedostoni vastaavassa hakemistossa ja k\u00e4yt\u00e4n gulp-sass-toimintoa k\u00e4\u00e4nt\u00e4en tiedostot CSS:\u00e4\u00e4n<\/a>.<\/p>\n

    gulp.task('sass', function(){\n  return gulp.src('assets\/styles\/scss\/*.scss')\n    .pipe(sass())\n    .pipe(gulp.dest('assets\/styles\/css'))\n});<\/code><\/pre>\n
    Sielt\u00e4 lis\u00e4\u00e4n CSS-tiedostot jonoon k\u00e4ytt\u00e4m\u00e4ll\u00e4 tarvittavaa WordPress API -toimintoa<\/a>.<\/p>\n
    2 JavaScript-pienennys<\/h3>\n
    T\u00e4ss\u00e4 vaiheessa JavaScript-tiedostojen pienent\u00e4misen edut on todistettu yh\u00e4 uudelleen ja uudelleen, joten en aio k\u00e4sitell\u00e4 asiaa sen enemp\u00e4\u00e4.<\/p>\n
    Olen kokeillut joitakin paketteja, jotka liittyv\u00e4t JavaScriptin minifiointiin, ja gulp-uglify<\/a> on se, jonka k\u00e4ytt\u00e4misest\u00e4 pid\u00e4n eniten.<\/p>\n
    \"Muutama<\/a><\/p>\n
    Muista edellisest\u00e4 osiosta, ett\u00e4 minulla on omaisuushakemistoni<\/strong> ja siin\u00e4 minulla on komentosarja<\/strong> – alihakemistoni. T\u00e4m\u00e4 hakemisto sis\u00e4lt\u00e4\u00e4 yhden oman alihakemistonsa: dev.<\/strong><\/p>\n
    Otan JavaScript-tiedostot, jotka sijaitsevat dev<\/strong> :ss\u00e4 ja tulostan ne<\/a> komentosarjahakemiston<\/strong> juureen .<\/p>\n
    gulp.task('minify-js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n
    Sielt\u00e4, kuten teen yll\u00e4, laitan ne jonoon k\u00e4ytt\u00e4m\u00e4ll\u00e4 samaa WordPress API -toimintoa<\/a>.<\/p>\n
    3 Kuvan optimointi<\/h3>\n
    Lopuksi yksi asia, joka voi auttaa varmistamaan, ett\u00e4 sivusi latautuvat nopeasti, on varmistaa, ett\u00e4 kuvasis\u00e4lt\u00f6si on optimoitu.<\/p>\n
    Tietysti on joitain ty\u00f6kaluja, joita voit k\u00e4ytt\u00e4\u00e4 manuaalisesti, mutta jos huomaat lis\u00e4\u00e4v\u00e4si, muuttavasi tai muokkaavasi kuvasis\u00e4lt\u00f6j\u00e4 usein ja haluat automatisoida optimoinnin koontiprosessin, suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n gulp-imagemin -ohjelmaa<\/a>.<\/p>\n
    [kuva]<\/p>\n
    T\u00e4ss\u00e4 tietyss\u00e4 kirjastossa on joitain riippuvuuksia, joten sinun on varmistettava, ett\u00e4 ne ovat my\u00f6s mukana. N\u00e4m\u00e4 sis\u00e4lt\u00e4v\u00e4t<\/p>\n