{"id":229578,"date":"2022-11-19T18:21:00","date_gmt":"2022-11-19T15:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229578"},"modified":"2022-11-19T18:21:08","modified_gmt":"2022-11-19T15:21:08","slug":"gulpi-stardipakettidega-alustamine","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/gulpi-stardipakettidega-alustamine\/","title":{"rendered":"Gulpi stardipakettidega alustamine"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/et\/mis-vahe-on-codekiti-ja-helilooja-vahel\/\" title=\"R\u00e4\u00e4kimine CodeKitist\">R\u00e4\u00e4kimine CodeKitist<\/a> ja selle esiotsa arendajatele pakutavatest eelistest on samuti tulnud vahetult p\u00e4rast postitust ja eeliseid, <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mida Gulp<\/a> pakub.<\/p>\n<p>Selle postituseks v\u00f5ib olla postitus nende kahe erinevuse kohta, selle kohta, miks v\u00f5iksite \u00fcht teisele eelistada ning kummagi eelistest v\u00f5i puudustest.<\/p>\n<p>Kuid selleks tahaksin v\u00f5tta l\u00e4htepaketid, millest <a href=\"https:\/\/wordpress.mediadoma.com\/et\/paar-naeksimispaketti-algajatele\/\" title=\"Gulpi\">Gulpi<\/a> kohta kirjutasin, ja tuua lihtsa n\u00e4ite Gulpi k\u00e4ivitusfailist ja selle kasutamisest oma WordPressi projektides.<\/p>\n<h2>Gulpiga alustamine<\/h2>\n<p>Esiteks, ma olen Homebrew&#8217;i f\u00e4nn, nii et kui on vaja hallata pakette, mis ei kuulu Mac App Store&#8217;i, siis kasutan seda. See muudab pakettide installimise, v\u00e4rskendamise ja desinstallimise palju lihtsamaks.<\/p>\n<p>Kui te pole <a href=\"https:\/\/wordpress.mediadoma.com\/et\/homebrew-node-ja-gulp-wordpressi-arendamiseks\/\" title=\"minu Homebrewi juhendit\">minu Homebrewi juhendit<\/a> lugenud, tehke seda, kuna \u00fclej\u00e4\u00e4nud postitus eeldab, et olete selle installinud.<\/p>\n<h3>1 Installige Gulp<\/h3>\n<p>Kui teil on installitud Homebrew, veenduge, et k\u00f5ik n\u00e4eks hea v\u00e4lja ja oleks ajakohane. Mul on kogu juhend Gulpi seadistamiseks teie kohalikus masinas.<\/p>\n<\/p>\n<p>Nii et kui teil seda seadistust veel pole, vaadake <a href=\"https:\/\/wordpress.mediadoma.com\/et\/homebrewi-kasutamine-solme-installimiseks-gulpi-installimiseks\/\" title=\"seda postitust\">seda postitust<\/a> selle kohta, kuidas seda teha.<\/p>\n<h3>2 Kirjutage oma Gulpi konfiguratsioonifail, 1. osa<\/h3>\n<p>Gulpi konfiguratsioonifaili l\u00e4htestamiseks sisestage terminalis oma projekti juurkataloogi <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">j\u00e4rgmine k\u00e4sk :<\/a><\/p>\n<p>Lihtne, kas pole?<\/p>\n<p>See loob teie projekti juurkataloogi t\u00fchja <strong>faili gulpfile.js .<\/strong> J\u00e4rgmiseks on aeg faili redigeerida.<\/p>\n<p>Selle postituse jaoks kasutan nelja paketti, mida olen eelnevalt kirjeldanud:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ahmima<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gulp-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">s\u00f5\u00f5m-pilt<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ahmima-inetuma<\/a><\/li>\n<\/ul>\n<p>K\u00f5ik need on \u00fclesanded, mis vastutavad Sassi \u00fclekandmise, piltide optimeerimise ja JavaScripti minimeerimise eest.<\/p>\n<blockquote>\n<p>\u00dclesannetes, mida soovite k\u00e4surealt k\u00e4ivitada, ei tohiks olla t\u00fchikuid.<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">P\u00f5hi\u00fclesannete<\/a> seadistamiseks nii, et saaksite neid k\u00e4surealt k\u00e4ivitada, peate tegema j\u00e4rgmist.<\/p>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-01-gulp-task-sass-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sass<\/a><\/h4>\n<pre><code>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<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-02-gulp-task-js-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScript<\/a><\/h4>\n<pre><code>gulp.task('js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-03-gulp-task-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pildid<\/a><\/h4>\n<pre><code>gulp.task('images', function() {\n  return gulp.src('assets\/images\/*')\n    .pipe(imagemin())\n    .pipe(gulp.dest('assets\/images'))\n});<\/code><\/pre>\n<h4>Nende eraldi jooksmine<\/h4>\n<p>Nende \u00fclesannete \u00fckshaaval k\u00e4itamiseks tuleb sisestada konsooli iga kord, kui soovite n\u00e4iteks Sassi-faile \u00fcle kanda ja JavaScripti faile minimeerida:<\/p>\n<p>Aga see vananeb kiiresti. Lisaks on see v\u00e4hem t\u00f5hus, eriti kui saate seadistada <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kella<\/a> nii, et see k\u00e4ivitaks faili salvestamisel automaatselt teie \u00fclesandeid.<\/p>\n<h3>2 Kirjutage oma Gulpi konfiguratsioonifail, 2. osa<\/h3>\n<p>Kella seadistamine on ilmselt parim, mida saate Gulpiga aja s\u00e4\u00e4stmiseks teha <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">.<\/a><\/p>\n<blockquote>\n<p>Vaadake faile ja tehke midagi, kui fail muutub. See tagastab alati EventEmitteri, mis v\u00e4ljastab <code>change<\/code>\u00a0s\u00fcndmusi.<\/p>\n<\/blockquote>\n<p>Kella seadistamine on lihtne. See sarnaneb \u00fclesandega (tegelikult n\u00f5uab see \u00fclesannet), kuid sellel on ka erilised argumendid. Sassi, JavaScripti ja pilte haldava j\u00e4lgimis\u00fclesande lisamiseks <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seadistage<\/a> failis gulpfile.js j\u00e4rgmine:<\/p>\n<pre><code>gulp.task('watch', function() {\n    gulp.watch('assets\/styles\/scss\/*.scss', gulp.series('sass'));\n    gulp.watch('assets\/scripts\/dev\/*.js', gulp.series('js'));\n    gulp.watch('assets\/images\/*', gulp.series('images'));\n});<\/code><\/pre>\n<p>Seej\u00e4rel k\u00e4ivitage lihtsalt <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00fclesanne<\/a> :<\/p>\n<p>Iga kord, kui salvestate Sassi-faili, JavaScript-faili v\u00f5i muudate pilti, k\u00e4ivitub see \u00fclesanne m\u00e4\u00e4ratud \u00fclesande t\u00e4itmisel automaatselt. Pange t\u00e4hele, et see t\u00f6\u00f6tab selle l\u00f5imes pidevalt, nii et kui teil on vaja t\u00e4iendavat t\u00f6\u00f6d teha, peate avama uue terminali vahekaardi v\u00f5i akna.<\/p>\n<h2>M\u00e4rkus versioonide kohta<\/h2>\n<p>Gulpi varasemates versioonides aktsepteeris j\u00e4lgimisfunktsiooni teine \u200b\u200bargument massiivi; aga uusim versioon n\u00f5uab tegelikku funktsiooni (mida n\u00e4ete \u00fclal, kui ma olen deklareerinud <strong>seeria<\/strong> ).<\/p>\n<p>L\u00fchike on see, et Gulp 4 v\u00f5imaldab j\u00e4rjestikust t\u00e4itmist, mida tehakse <strong>seeria<\/strong> kaudu, ja paralleelset t\u00e4itmist (mis v\u00f5ib kasutada <strong>paralleelfunktsiooni<\/strong> ). Need ei kuulu selle postituse ulatusse, kuna see on m\u00f5eldud ainult teie alustamiseks.<\/p>\n<p>Kui see on tehtud, peaks teie ehitusprotsess olema palju rohkem automatiseeritud.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gulpi stardipakettidega alustamine on j\u00e4rg eelmisele postitusele, mille eesm\u00e4rk on aidata automatiseerida levinud toiminguid, mida kasutame.<\/p>\n","protected":false},"author":1,"featured_media":165162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,749,916,842,863],"tags":[1165],"class_list":["post-229578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-avatud-laehtekoodiga","category-muud","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229578"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229578\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}