{"id":229421,"date":"2022-11-15T13:37:00","date_gmt":"2022-11-15T10:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229421"},"modified":"2022-11-09T06:58:06","modified_gmt":"2022-11-09T03:58:06","slug":"paar-naeksimispaketti-algajatele","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/paar-naeksimispaketti-algajatele\/","title":{"rendered":"Paar n\u00e4ksimispaketti algajatele"},"content":{"rendered":"\n

Tarkvara, nagu Gulp<\/a> ja muud utiliidid, pole uus. Neile, kes pole neid varem kasutanud, v\u00f5ib selle alustamine olla pisut hirmutav (aga tegelikult ei tohiks see nii olla).<\/p>\n

V\u00f5rreldes selliste t\u00f6\u00f6riistadega nagu CodeKit<\/a> (mis mulle endiselt meeldib ja<\/a> olenevalt projektist soovitab), on neil pisut rohkem kulusid nende seadistamisel, seadistamisel ja t\u00f6\u00f6ks valmisolekul.<\/p>\n

Kuid kui olete selle k\u00f5ik \u00fcles seadnud, v\u00f5ib see olla v\u00e4ga kasulik hajutatud meeskonnaga, olenemata operatsioonis\u00fcsteemist, ja see v\u00f5ib aidata teil teie ehitusprotsessi pisut j\u00f5ulisemaks muuta.<\/p>\n

See pole aga postituse eesm\u00e4rk. Selle asemel on siin alustuseks nimekiri m\u00f5nest paketist.<\/p>\n

M\u00f5elge neile j\u00e4rgmiselt: kui otsite v\u00f5imalusi Sassi<\/a>, JavaScripti ja pildi optimeerimisega t\u00f6\u00f6tamiseks, on need head teegid.<\/p>\n

L\u00f6\u00f6gipaketid algajatele<\/h2>\n

Enne iga j\u00e4rgmise paketi juurde h\u00fcppamist tahan m\u00e4rkida, et oluline on l\u00e4bi lugeda k\u00f5ik lingitud lehed. Dokumentatsioon aitab tutvuda teekide pakutavate valikutega, mida minu esitatud kood ei n\u00e4ita.<\/p>\n

See t\u00e4hendab, et \u00e4rge lihtsalt kopeerige ja kleepige seda, mida ma olen esitanud. Kasutage seda l\u00e4htepunktina, kuid lugege l\u00e4bi ka dokumentatsioon. V\u00f5ib-olla ei leia te midagi uut.<\/p>\n

Samuti v\u00f5ite avastada, et teie konkreetse projekti kohandamiseks on v\u00f5imalusi.<\/p>\n

1 Sass<\/h3>\n

V\u00f5ite teha koost\u00f6\u00f6d Lessiga<\/a> (ma ei ole siin ega seal tegelikult), kuid ma eelistan Sassi. Seega kasutan ma raamatukogu gulp-sass<\/a> spetsiaalselt Sassi failide kompileerimiseks CSS-i.<\/p>\n

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

Tavaliselt on mul varade<\/strong> kataloog ja selles kataloogis on m\u00f5ned piltide<\/strong>, stiilide<\/strong> ja skriptide<\/strong> alamkataloogid .<\/p>\n

Stiilide\u00a0 kataloogis on mul<\/strong> kaks alamkataloogi:<\/p>\n

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

    Hoian k\u00f5iki oma SCSS-faile vastavas kataloogis ja seej\u00e4rel kasutan kompileeritud failide CSS-i v\u00e4ljastamiseks<\/a> gulp-sassi .<\/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
    Sealt panen CSS-failid j\u00e4rjekorda, kasutades selleks vajalikku WordPress API funktsiooni<\/a>.<\/p>\n
    2 JavaScripti minimeerimine<\/h3>\n
    Praeguseks on JavaScripti failide minimeerimise eelised ikka ja j\u00e4lle t\u00f5estatud, nii et ma ei hakka selle teemaga edasi tegelema.<\/p>\n
    Olen proovinud m\u00f5nda paketti, mis on seotud JavaScripti minimeerimisega ja gulp-uglify<\/a> on see, mille kasutamist mulle k\u00f5ige rohkem meeldib.<\/p>\n
    \"Paar<\/a><\/p>\n
    Tuletage meelde eelmisest jaotisest, et mul on oma varade<\/strong> kataloog ja selles on mul skriptide<\/strong> alamkataloog. See kataloog sisaldab \u00fchte alamkataloogi: dev.<\/strong><\/p>\n
    V\u00f5tan JavaScript-failid, mis asuvad dev<\/strong> -is, ja v\u00e4ljastan need<\/a> skriptide<\/strong> kataloogi juure\u00a0 .<\/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
    Sealt, nagu teen eespool, panen need j\u00e4rjekorda, kasutades sama WordPress API funktsiooni<\/a>.<\/p>\n
    3 Pildi optimeerimine<\/h3>\n
    L\u00f5puks, \u00fcks asi, mis v\u00f5ib teie lehe(te) kiire laadimise tagamisel palju aidata, on see, et teie pildivarad on optimeeritud.<\/p>\n
    Muidugi on m\u00f5ningaid t\u00f6\u00f6riistu, mida saate selleks k\u00e4sitsi kasutada, kuid kui leiate end sageli pildivarasid lisamas, muutmas v\u00f5i muutmas ja soovite optimeerimise koostamise protsessi automatiseerida, siis soovitan kasutada gulp-imagemini<\/a>.<\/p>\n
    [image]<\/p>\n
    Selle konkreetse teegi jaoks on m\u00f5ned s\u00f5ltuvused, nii et peate veenduma, et ka need on kaasatud. Need sisaldavad<\/p>\n